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随 着 计算 机 网 络 的 迅速 发 展 ，Intemet 已 经 成 为 人 们 生活 中 不 可 或 缺 的 重要 组 成 部 分 。 
政府 机 关 通 过 网 站 实现 电子 政务 ， 企 业 利 用 网 站 展示 企业 形象 、 推 广 产 品 并 进行 电子 商务 


活动 ; 个 人 建立 一 个 具有 独特 风格 的 网 站 来 展示 与 自我 宣传 。 








因此 ， 搭 建 网 站 、 设 计 精 美 


的 网 页 来 吸引 浏览 者 成 为 大 家 共同 关注 的 目标 。 学 校 里 和 社会 上 涌现 了 大 量 的 网 页 设计 爱 
好 者 , 他 们 人 迫切 希望 尽快 学 习 网 站 规划 与 网 页 设计 的 知识 , 并 将 其 应 用 于 网 站 建设 的 实 


践 中 。 








本 书 力求 “理论 与 实践 的 完美 结合 ， 突 出 能 力 结构 的 培养 ”。 通 过 本 书 的 学 习 ， 使 学 
生 熟 练 运用 软件 进行 网 站 的 编辑 、 网 页 界面 和 网 页 动画 的 设计 ， 培 养 学 生 进 行商 务 网 站 建 
设 的 自主 策划 与 设计 能 力 ;使 学 生 能 获得 从 事 网 站 编辑 、 网 页 美工 创意 、 动 漫 设计 、 网 页 


设计 等 方面 的 综合 技能 。 


一 、 本 书 的 内 容 























模块 内 容 目的 
网 站 规划 的 流程 1. 项 目 调查 : 网 站 项 目 需求 分 析 
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平面 设计 基础 了 解 平 面 设计 基础 ， 如 图 像 类 型 、 
gi 色彩 的 应 用 图 像 分 辨 率 等 ;了 解 色彩 应 用 和 网 
Eee 网 页 设计 的 构图 页 构图 的 技巧 ;掌握 网 页 设计 的 工 
网 页 设计 的 流程 作 流 程 
Flash CC 的 基本 功能 利用 Flash CC 设计 网 页 动画 
利用 Flash 设计 We 
网 页 动画 应 用 Flash 设计 动画 
网 站 片头 Flash 动画 设计 
Photoshop CC 基本 应 用 利用 Photoshop CC 设计 平面 作品 
Photoshop 网 页 设计 Photoshop CC 平面 设计 和 网 站 首页 作品 





Photoshop CC 网 页 设计 
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二 、 本 书 的 特点 


本 书 根据 普通 高 等 院 校 应 用 型 特色 进行 教材 的 规划 ， 按 照 教育 部 应 用 型 人 才 培 养 的 教 
学 要 求 进行 教材 的 编写 ， 从 基础 理论 到 专业 技能 ， 再 到 工程 实践 三 个 阶段 出 发 进行 教材 的 
开发。 

(1) 教材 实例 来 源 于 企业 实际 资料 ， 可 以 保证 学 生 所 学 的 教材 内 容 满足 社会 和 用 人 单 
位 的 实际 需求 。 

(2) 教材 体系 包括 三 个 方面 : 基础 知识 、 专 业 技能 和 工程 实践 ， 涵 盖 的 范围 广 ， 可 以 
充分 保证 学 生 不 同 起 点 、 不 同 层次 的 选择 。 

(3) 教材 设计 尽量 使 用 简洁 明了 的 文字 和 科学 的 逻辑 思维 ， 在 教学 上 严格 规定 教师 的 
教学 方向 ， 将 教学 内 容 中 的 理论 部 分 与 实践 部 分 进行 合理 的 分 配 ， 能 够 让 学 生 迅 速 跟 进 ， 
快速 领悟 。 

(4) 通过 以 下 三 个 层次 的 实际 案例 教学 来 提高 学 生 的 实践 操作 能 力 。 

Q@ 以 能 力 的 培养 和 提高 构建 教学 内 容 。 

教学 内 容 以 商务 网 站 建设 的 实际 项 目 作为 主线 展开 ， 介 绍 网 站 规划 与 网 页 设计 的 工作 
流程 ， 把 实用 技术 作为 重点 。 

@ 教材 的 编写 满足 社会 和 企业 的 需求 。 

以 商务 网 站 规划 、 网 页 设计 与 网 页 制作 所 必 备 的 综合 能 力 培养 为 目标 ， 以 教 、 学 、 做 
融 于 一 体 为 方法 ， 校 企 合作 为 模式 ， 共 同 开 发 与 设计 教材 。 

@@ 加 强 系统 性 和 针对 性 ， 注 重 培养 学 生 的 综合 素质 。 

通过 大 量 的 案例 分 析 ， 使 学 生 掌 握 网 页 设计 基础 理论 ， 从 而 能 够 从 美学 的 角度 进行 网 
页 配色 、 网 页 构图 ， 最 终 实现 网 页 设计 的 最 佳境 界 。 

(5) 本 书 内 容 丰 富 ， 配 套 资料 全 。 

本 书 (第 一 版 ) 出 版 后 ， 受 到 广大 读者 的 广泛 欢迎 ，2016 年 获 陕 西 省 优秀 教材 二 等 奖 ， 
作为 陕西 省 精品 课程 “网 页 设计 与 制作 ”的 配套 教材 ， 教 学 资源 非常 全 面 ， 有 全 套 的 电子 
课件 、 电 子 教案 、 建 站 素材 、 教 学 大 纲 、 实 验 指导 、 习 题解 答 、 视 频 教学 等 ， 以 及 书 中 用 
到 的 案例 集 、 彩 色 样 图 均 可 从 http://web.xjpgy.com/ 网 站 上 下 载 。 

本 书 由 杜 永 红 总 体 策划 ， 负 责 全 书 的 统 稿 工 作 。 各 章 编写 的 具体 分 工 如 下 : 第 1 章 至 
第 3 章 由 杜 永 红 编写 ， 第 4 章 至 第 9 章 分 别 由 梁 林 蒙 、 靳 强 、 吴 朋 化 、 侯 阿利 编写 ,第 10 
章 由 谢 恬 编写 ， 第 11 章 由 秦 效 宏 、 史 高 峰 、 文 小 森 、 郭 文 霞 、 梁 庆 军 、 王 冬 霞 、 危 小 波 、 
刘 啸 、 毛 展 展 、 马 春 紫 、 马 静 、 张 惠 等 编写 ， 马 里 千 参与 教材 资料 收集 、 课 件 制 作 等 工作 。 
由 于 作者 水 平 有 限 ， 书 中 难免 有 不 足 之 处 ， 敬 请 读者 批评 指正 。 
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第 1 章 ”网 站 规划 


网 站 规划 也 叫 网 站 策划 , 是 指 在 网 站 建设 前 对 市 场 进行 分 析 、 确定 网 站 的 目的 和 功能 ， 
并 根据 需要 对 网 站 建设 中 的 技术 、 内 容 、 费 用 、 测 试 、 维 护 等 做 出 规划 。 网 站 规划 对 网 站 
建设 起 到 计划 和 指导 的 作用 ， 对 网 站 的 内 容 和 维护 起 到 定位 作用 。 

本 章 主要 介绍 网 站 规则 的 方法 ， 主 要 包括 : 网 站 规划 的 流程 、 网 站 规划 的 内 容 、 网 站 
规划 的 原则 ， 并 通过 一 个 案例 分 析 ， 进 一 步 讲 解 如 何 撰写 网 站 规划 方案 。 

【本 章 学 习 目标 】 

通过 本 章 学 习 ， 读 者 能 够 掌握 : 

e 项 目 调查 : 网 站 项 目 需求 分 析 

e 方案 决策 :网 站 规划 

e 计划 制定 ， 网 站 建设 项 目 实施 方案 的 制定 








1.1 网 站 规划 的 流程 


网 站 的 成 功 与 否 与 建站 前 的 网 站 规划 有 着 极为 重要 的 关系 。 在 建立 网 站 前 应 明确 建设 
网 站 的 目的 ， 确 定 网 站 的 功能 ， 确 定 网 站 规模 、 投 入 费用 ， 进 行 必要 的 市 场 分 析 等 。 只 有 
经 过 详细 的 规划 ， 才 能 避免 在 网 站 建设 中 出 现 很 多 问题 ， 使 网 站 建设 能 够 顺利 进行 ， 网 站 
规划 流程 图 如 图 1.1 所 示 。 


厅 解 客户 需求 
| 规划 前 | 亲 解 管理 者 对 网 络 的 需求 


了 解 企业 中 未 来 网 站 的 管理 者 | 


提出 方案 
合理 分 配 网 页 版 块 

规划 后 站 | 追踪 调查 

图 1.1 网 站 规划 流程 图 












































网 站 规划 的 工作 流程 如 下 : 

1) 了 解 客 户 的 需求 。 只 有 了 解 制作 网 站 的 真正 目的 ,才能 设计 出 满意 的 网 站 。 比 如 某 
企业 希望 通过 网 站 获得 更 多 的 知名 度 ， 则 重点 就 要 在 宣传 推广 方面 进行 设计 。 大 家 熟知 的 
一 些 大 型 网 站 ， 比 如 腾讯 、 新 浪 等 ， 都 是 通过 推广 其 网 站 ， 然 后 陆续 推出 一 些 拍卖 网 、 广 
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告 位 等 赢利 项 目 。 

2) 了 解 管理 者 对 网 络 的 需求 。 这 里 要 强调 的 是 如 果 管 理 人 员 对 网 络 比较 了 解 ， 那么 在 
规划 网 站 时 就 应 当 根据 自己 的 经 验 为 客户 打造 他 们 真正 需要 的 网 站 , 避免 制作 后 多 次 更 改 。 

3) 了 解 企 业 中 未 来 网 站 的 管理 者 。 虽然 未 来 的 网 站 管理 者 不 是 决定 本 次 业务 合作 能 否 
接受 的 关键 ， 但 他 拥有 的 却 是 决定 事情 难 易 程度 的 能 力 。 尽 量 把 网 站 管理 者 的 一 些 爱好 和 
习惯 考虑 进去 ， 这 样 在 将 来 会 减少 修改 的 机 会 。 

4) 提出 方案 。 在 规划 方案 的 过 程 中 , 不 要 照搬 他 人 的 方案 ， 而 应 认真 分 析 客 户 的 需求 
以 及 综合 考虑 多 方面 的 因素 ， 提 出 切实 可 行 的 方案 。 

5) 站 在 他 人 的 角度 思考 问题 。 在 制作 规划 的 过 程 中 ， 要 假设 自己 是 一 个 运营 者 ， 该 关 
心 什么 问题 ， 是 成 本 ， 还 是 收益 ? 只 有 站 在 别人 的 角度 思考 问题 ， 才 能 交 出 满意 的 作品 。 

6) 合理 分 配 网 站 的 版 面 ， 在 设计 网 页 的 时 候 不 要 将 太 多 功能 压缩 到 3 至 5 个 栏目 中 ， 
或 者 栏目 设计 太 多 ， 功 能 却 被 极力 压缩 ， 使 付出 的 代价 和 得 到 的 回报 不 成 正比 。 

7) 追踪 调查 。 体 现 设计 人 员 的 专业 性 ,不仅 是 把 规划 方案 制作 好 ， 而 更 艰巨 的 任务 是 
后 期 的 服务 ， 比 如 定时 追踪 、 接 受 反馈 意见 等 。 


1.2 网 站 规划 的 内 容 


网 站 规划 对 网 站 建设 起 到 计划 和 指导 的 作用 ， 对 网 站 的 内 容 和 维护 起 到 定位 作用 。 网 
站 规划 是 网 站 建设 的 基础 和 指导 纲领 ， 决 定 了 网 站 的 发 展 方向 ， 同 时 对 网 站 推广 也 具有 指 
导 意 义 ， 主 要 任务 是 制定 网 站 的 发 展 战略 、 制 定 网 站 的 总 体 方案 ， 安 排 项 目 开 发 计划 、 制 
定 网 站 建设 的 资源 分 配 计划 。 网 站 规划 内 容 通 常 包括 以 下 内 容 


1.2.1 建设 网 站 前 的 市 场 分 析 


1) 相关 行业 的 市 场 是 怎样 的 ， 市 场 有 什么 样 的 特点 ， 是 否 能 够 在 互联 网 上 开展 公司 
业务 。 

2) 市 场 主要 竞争 者 分 析 ， 竞 争 对 手 的 上 网 情况 及 其 网 站 策划 、 功 能 作用 。 

3) 公司 自身 条 件 分 析 、 公 司 概况 、 市 场 优势 ， 可 以 利用 网 站 提升 哪些 竞争 力 ， 建 设 网 
站 的 能 力 (费用 、 技 术 、 人 力 等 )。 


1.2.2 ”建设 网 站 的 目的 及 功能 定位 


1) 为 什么 要 建立 网 站 ， 是 为 了 树立 企业 形象 ， 宣 传 产 品 ， 进 行 电子 商务 ， 还 是 建立 行 
业 性 网 站 ? 是 企业 的 基本 需要 还 是 市 场 开 拓 的 延伸 ? 

2) 整合 公司 资源 ， 确 定 网 站 功能 。 根 据 公司 的 需要 和 计划 ,确定 网 站 的 功能 类 型 : 企 
业 形 象 型 、 产 品 宣传 型 、 网 上 营销 型 、 信 息 服务 型 、 网 络 销售 型 等 。 

3) 根据 网 站 功能 ， 确 定 网 站 应 达到 的 目的 及 作用 。 

举例 说 明 ， 建 设 一 个 教育 培训 网 站 的 目标 是 为 接受 培训 教育 的 学 生 服务 ， 并 且 吸 引 更 
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多 的 学 生 接 受 该 校 的 教育 培训 ， 因 此 在 建设 网 站 时 就 要 围绕 这 个 目标 确定 网 站 的 栏目 ， 如 
图 1.2 所 示 。 尽 管 建设 网 站 的 目标 不 尽 相同 ， 但 是 有 一 点 必须 明确 ， 那 就 是 目标 控制 得 越 
详细 ， 对 今后 的 工作 开展 越 有 利 。 
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图 1.2 教育 培训 网 站 





1.2.3 分 析 目 标 客 户 及 潜在 客户 对 站 点 的 需求 

在 这 一 阶段 , 需要 掌握 一 些 典型 目标 客户 的 基本 信息 。 例如 : 他 们 共同 的 兴趣 是 什么 ? 
他 们 希望 从 站 点 中 获得 什么 ? 要 得 到 这 些 信息 ， 既 可 以 做 一 些 问卷 调查 ， 也 可 以 从 末 友 、 
同学 那里 获得 一 些 建 议 ， 还 可 以 在 博客 、BBS 上 设立 反馈 信息 页 ， 从 浏览 者 那里 得 到 实际 
的 信息 ， 然 后 对 网 站 进行 规划 。 

例如 : 对 于 教育 培训 网 站 ， 目 标 客户 相对 固定 ， 所 以 比较 容易 确定 用 户 对 站 点 的 需求 。 
通过 简要 分 析 即 可 确定 网 站 的 栏目 主要 应 包括 “课程 分 类 ”、“ 学 习 资料 ”、“ 教 师 简 
介 ” 等 
1.2.4 “域名 申请 


所 谓 域名 ， 就 是 企业 在 互联 网 上 的 名 称 。 一 个 企业 的 域名 在 互联 网 上 是 唯一 的 。 通 过 
在 浏览 器 的 地 址 栏 中 输入 域名 来 访问 企业 的 网 站 。 

域名 与 企业 商标 、 企业 标识 物 具有 异曲同工 的 效果 ， 因 此 又 把 域名 称 为 “网 络 商 标 ”。 

1. 域名 的 注册 

一 般 选 择 信誉 较 好 的 互联 网 信息 服务 提供 商 ， 由 他 们 代为 办 理 注册 事宜 。 比 如 : 当地 
的 电信 运营 商 、 国 内 较为 著名 的 ICP 服务 商 。 

2. 域名 的 命名 规则 

域名 非常 重要 ， 域 名 已 经 成 为 互联 网 的 品牌 、 网 上 商标 保护 必 备 的 产品 之 一 ， 一 个 好 
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的 域名 对 网 络 营销 的 成 功 具 有 重要 意义 。 

1) 域名 的 申请 与 企业 的 CIS 有 一 定 的 关系 。 营 造 一 个 独一无二 的 企业 品牌 是 建立 成 功 
域名 的 核心 。 企 业 域名 的 命名 应 与 企业 名 称 、 商 标 等 统一 、 整 合 ， 构 成 完整 的 企业 识别 系 
统 (CIS)。 比 如 : www.ibm.com(IBM 公司 的 域名 )、www.dell.com( 戴 尔 公司 的 域名 )。 

2) 命名 域名 时 应 掌握 具有 唯一 、 易 记 、 形 象 好 的 特点 。 例 如 : 网 易 原来 的 域名 叫 
netease.com， 后 改 为 163.com， 更 适合 中 国人 记忆 。 

3) 域名 由 字母 、 数 字 和 横 杠 组 成 ， 不 能 有 空格 或 其 他 特殊 字符 。 

4) 域名 长 度 要 短 。 


1.2.5 ”Web 服务 器 的 选择 


为 什么 要 选择 Web 服务 器 ? Web 服务 器 是 企业 信息 资料 的 存放 处 。 通 过 HITP( 超 文 
本 传输 协议 ) 来 访问 企业 的 网 站 。 

如 何 构架 服务 器 呢 ? 有 以 下 几 种 选择 ; 

1) 企业 自己 架构 服务 器 (用 于 大 中 型 企业 ), 建立 企业 内 联网 (intraneb 并 接 入 到 互联 网 。 
需要 专业 的 服务 器 、 接 入 外 网 的 专用 线路 和 专业 的 网 络 管理 人 员 。 

2) 租用 ICP 服务 商 的 服务 器 。 

e 虚拟 主机 服务 ， 用 特殊 的 软件 将 计算 机 主机 分 成 若干 部 分 ， 每 一 部 分 可 具有 独立 
的 域名 ， 因 此 一 台 Web 服务 器 可 提供 给 多 个 用 户 使 用 ， 这 大 大 降低 了 成 本 ， 适 用 
于 中 小 型 企业 。 
e 租用 独立 服务 器 : 租用 互联 网 服务 提供 商 的 整 台 服 务 器 ， 由 其 提供 他 地 址 和 必要 
的 日 常 维护 等 ， 与 自 架 服务 器 相 比 成 本 较 低 ， 适 用 于 中 小 型 企业 。 


1.2.6 ”确定 网 站 风格 


确定 了 站 点 的 整体 风格 ， 也 就 决定 了 网 站 内 容 的 表现 形式 ， 包 括 网 页 所 采用 的 布局 结 
构 、 颜 色 、 字 体 、 标 志 图 形 、 图 像 、 动 画 等 。 不 管 采用 什么 样 的 风格 ， 只 要 能 够 找到 文字 
与 图 像 和 其 他 网 络 媒体 的 平衡 点 ， 给 访问 者 想得到 的 信息 或 是 感受 ， 最 终 吸 引 访问 者 ， 屠 
么 网 站 就 成 功 了 。 

Intemet 上 的 网 站 类 型 繁多 ， 归 纳 起 来 主要 有 以 下 两 种 : 

1. 信息 式 

这 类 站 点 主要 是 以 文字 信息 为 主 ， 所 以 页 面 的 布局 要 求 整齐 划一 ， 而 且 站 点 中 的 每 层 
页 面 都 会 有 一 个 导航 系统 ， 顶 部 区 域 大 多 使 用 一 些 比较 有 特色 的 币 标 或 公司 商标 ， 顶 部 中 
间 有 一 些 广告 横幅 ,页 面 剩余 部 分 则 分 门 别 类 放置 了 大 量 的 文本 超 链 接 , 整个 站 点 对 图 像 、 
动画 等 这 些 带 有 修饰 成 分 的 多 媒体 信息 采用 比较 低调 的 处 理 方式 ， 每 个 页 面包 含 少量 图 像 
或 动画 。 目 前 国内 知名 的 门户 网 站 ， 例 如 “搜狐 ”、“ 新 浪 ”等 都 属于 信息 式 网 站 ， 如 图 
1.3 所 示 。 
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体育 奥 云 IEA 博客 祝 沽 各 查访 种 至 育 再 儿 空间 邮箱 
她 乐 组 娃 言 和 视频 全 这 大 片 女性 健康 中 医 论坛 节 太 
汽车 报价 买 牛 房产 EJV 守 居 条 库 商品 中 迹 游 肪 于 二 


识 壮 城市 际 西 上 海 言 和 夫 下 载 导航 
sany 蔓 游 和 空 图 片 环保 天 气 要 问 
时 三 短信 应 用 手 洲 彩票 公共 世 司 



































时 僚 极 柑 壬 网 村 面世 硕 义 完 上 栈 半 要 区 财富 公 氨 亿 万 级 碱 于 。 第 六 届 万 达 两 业 后 会 。 买 便宜 谢 必 看 5 区 域 。 证 越 p9 做 有 后 一 起 二 于 店 真 店 源 
二 手 房市 场 月 月 报 限购 际 墅 看 至 屠 200 万 海 涯 别墅 一 房 正 手 全 国度 恨 少 广 型 请 名 让 降 十 万 。 地 产 百 强 ， 泉 再 集 团 经 沁 人 激 洗 秀 
创 经 纪 人 联动 平台 做 二 手表 交易 高 手 
业 中 齐 经 纪 信 丰 酸 史 乐 居 同 情 购 记 竹 
全 和 下 点 事 电 丙 与 二 手 冤 
旅 ”二 手记 饭 质 房 浊 媒 笠 二 于 员 内 芭 
可 。 中 介 负 二 秀 聘 明 移 购 记者 
国 于 局 租房 难 执 授 寻 抽 北京 小 三 居 乐 居 精 品 购 席 指南 要 区 汪 居 8 月 开 僵 网 二 必 看 低 价 1 居 大 能 三 平 注 规避 一 手记 陷阱 
购 。 经 汉人 联盟 注册 四 环 地 捧 均 俐 一 万 五 。 ?0 万 加 此 京 别墅 梦 。 。 宝 谍 向 北 升迁 银 京 0 和 三 盾 一 步 到 二 手 赶 贷款 流 香 
南 间 | F& 和 HR 入 | 下 本 | | 画 f 视 人 二 多 视 应 ， 理 乐 知 RA | 资料， 霹 图 | 汽车 | 相生 | 怕 记 于 六 | 
地 球 卫 十 ed ru i 
至 括 虹 全 于 重演 声 则 和 光临 各 开 来 被 判 死 组 阿 关 奇 公开 往 计 王刚 噶 质 品 引 争议 李 媳 想 五 赛 夺冠 
”EE 北京 时 间 ,2012.8,20 
- 日 本 拓 爷 中 方 抗 称 中 国保 的 者 全 和 在 先 


2. 画廊 式 
















克 力 16 大 址 牛 暖 全 





“也 1 


" 薄 谷 开 来 ， 线 晓 军 故意 杀人 案 一 罕 宣 判 (宣判 现场 
， 重 庆 挂 可 3 千 通 话 人 员 锁 定 周 克 华 手机 号 辟谣 被 答 慢 
“卫生 部 报告 名 议 建立 大 健康 部 综合 医保 计生 等 职能 


“财政 部 组 织 清查 全 国 各 级 事业 单位 公车 
" 坦 委 国 ， 中 国 不 诺 求 世界 经 济 祷 补 的 虚名 
新 闻 | Cn 萍 谷 开 来 谈判 处 死 组 不 上 诉 “ 厂 永和 省 政府 不 副 秘 书 长 谢 网 飞 严重 违纪 被 双开 
“Gx 美 日 模拟 放 多 血 岛 老外 隐 直 国 女 子 “气象 局 回应 风能 本 阳 能 归 国 有 称 各 省 可 借 室 
9 痪 抗 议 者 海边 如 现 所 长 骂 若 车 度假 。 。。 Gx 韩国 在 独 岛 立 标志 石 件 张 主权 李 明 博 条 白 题 宁 
Cx 驯 本 办 4 六 酒 店 前 台 男子 权 意 纵火 ， 调 研 显 示 户 绪 次 蕴 几 乎 理 所 有 市 发 反对 
士 后 下 海 送 全 正明 。GM 美 女 行 驴 夺 上 走 测 丝 男子 当众 小 解 。… 滑 南 从 困 且 县 长 承 浅 不 仿 钱 不 仿 色 引 热 议 
"4 众 星 答 名 守护 濒危 北极 起 擅 笑 ， 路 人 只 按 美 女 搓 答 车 “ 厂 电 总 局 表扬 《你 夏 属 》 等 节目 称 册 处 人 为 杰 
体育 芒 油 斯 大 片 





图 1.3 信息 式 网 站 : 新 浪 


这 类 站 点 的 典型 代表 是 个 人 网 站 或 公司 网 站 ， 表 现形 式 主要 以 图 像 、 动 画 、 多 媒体 等 
为 主 ， 注 重 通过 各 种 信息 手段 表现 个 人 特色 或 公司 要 宣扬 的 理念 。 

例如 : 对 于 教育 培训 网 站 ， 它 既 不 是 一 个 大 型 的 门户 网 站 ， 也 不 是 一 个 公司 或 个 人 网 
站 ， 所 以 网 站 的 风格 介 于 上 述 两 种 风格 之 间 ， 既 需要 提供 大 量 的 文字 信息 ， 也 需要 一 些 图 


像 、 动 画 来 吸引 浏览 者 ， 如 图 1.4 所 示 。 





图 1.4 


画廊 式 网 站 
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1.2.7 ”考虑 网 络 的 技术 问题 


在 设计 网 页 时 ， 要 充分 考虑 到 网 络 的 速度 因素 ， 也 就 是 常 说 的 “带宽 ”问题 ， 而 且 还 
要 考虑 浏览 器 、 分 辩 率 等 。 


1. 网 络 的 速度 因素 


有 关 下 载 时 间 有 一 条 “8 秒 钟 原则 ”， 即 : 绝 大 多 数 浏览 者 不 会 等 待 8 秒 钟 来 完整 下 
载 一 个 网 页 ， 所 以 在 设计 网 页 时 应 使 预计 的 下 载 时 间 少 于 8 秒 钟 。 如 果 页 面 的 下 载 速度 太 
慢 , 则 访问 者 不 会 考虑 页 面 中 有 什么 吸引 人 的 地 方 ,而 且 会 很 快 地 按 下 浏览 器 上 的 “停止 ” 
按钮 ， 或 是 转 到 其 他 的 网 站 。 

影响 网 页 显示 速度 的 最 主要 因素 是 图 像 、 动 画 、 视 频 的 数量 和 大 小 。 加 快 页 面 下 载 速 
度 最 有 效 的 方法 ， 就 是 适当 减少 页 面 中 的 图 像 、 动 画 、 视 频 的 大 小 和 数量 。 


2. 浏览 器 与 分 辩 率 


显示 器 的 屏幕 分 辩 率 是 网 页 设计 者 应 该 特别 关注 的 因素 ， 显 示 器 的 屏幕 分 辨 率 是 指 计 
算 机 屏幕 水 平 与 垂直 方向 的 像素 值 ( 即 屏幕 的 宽度 与 高 度 )， 通 常 可 以 将 国内 用 户 的 显示 器 
屏幕 分 辩 率 的 设计 标准 定 为 : 1024*768 像素 。 


3. 即时 交互 与 插件 


考虑 网 站 是 否 需 要 进行 交互 。 网 站 中 包含 多 媒体 对 象 时 ， 客 户 端 是 否 需 要 下 载 安装 相 
应 的 插件 以 及 客户 是 否 愿 意 下 载 安 装 ， 由 于 大 多 数 浏览 器 内 置 了 Flash 播放 器 ， 建 议 多 采 
时 Flash 动画 或 Flash 视频 。 














1.3 ”网 页 设计 的 原则 


网 页 要 设计 好 ， 需 要 看 设计 者 的 功力 与 用 心 程度 。 在 这 里 应 当 考虑 到 站 点 内 容 的 丰富 
性 ， 只 有 吸引 大 量 的 用 户 来 关注 ， 网 站 才 会 产生 生命 力 。 所 以 ， 设 计 者 应 当 注 意 以 下 几 条 
原则 ， 如 图 1.5 所 示 。 

1) 用 户 优先 。 无 论 什 么 时 候 ， 只 有 得 到 用 户 的 认可 ， 工 作 才 算 做 到 位 。 设 计 者 的 初衷 
是 为 了 满足 广大 用 户 的 需要 ， 并 不 是 用 来 自我 欣赏 。 

2) 在 设计 网 页 的 过 程 中 , 对 一 些 比 较 大 的 Flash 动画 、 图 像 等 要 尽量 做 技术 上 的 分 割 。 
进行 测试 ， 检 测 网 页 开启 的 速度 是 否 合理 ， 即 前 面 提 到 的 “8 秒 钟 原则 ”。 

3) 考虑 用 户 的 软 硬 件 配置 。 有 些 用 户 的 电脑 软 硬 件 配置 不 高 ， 比 如 存在 显示 分 辨 率 和 
浏览 器 版 本 高 低 等 问题 。 所 以 设计 者 应 当 为 用 户 考虑 一 下 ， 怎 样 才能 让 他 们 可 以 正确 浏览 
网 页 。 

4) 内 容 丰 富 。 内 容 的 丰富 性 包括 文字 、 图 像 和 音 视频 等 巧妙 搭配 ， 但 要 记 住 ， 内 容 一 
定 要 跟 网 站 所 要 提供 的 信息 相对 应 。 
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图 1.5 优秀 网 站 推荐 : 页 面 干净 、 主 题 究 出 、 栏 目 导航 清晰 

5) 着 手 规划 、 确 定 特色 、 锁 定 目标 。 确 定 网 站 的 性 质 、 内 容 、 目 标 网 民 后 ， 提 供 及 时 、 
新 颖 、 丰 富 的 信息 ， 吸 引 浏览 者 驻足 网 站 。 

6) 首页 的 重要 性 。 首 页 是 浏览 者 对 网 站 产生 第 一 印象 的 关键 ， 要 秉持 干净 而 清爽 的 原 
则 。 第 一 ， 若 无 特殊 需要 ， 尽 量 不 要 放置 大 的 图 像 文件 或 程序 ， 因 为 它们 会 增加 下 载 的 时 
间 ， 导 致 用 户 失去 浏览 网 页 的 耐心 ， 第 二 ， 画 面 不 要 设置 得 杂乱 无 序 ， 因 为 用 户 有 可 能 会 
找 不 到 自己 需要 的 东西 。 

7) 栏目 的 归 类 。 内 容 的 分 类 很 重要 ， 可 以 按 主题 、 性 质 、 组 织 机 构 等 分 类 ， 无 论 采用 
哪 一 种 分 类 方法 ， 都 要 让 用 户 能 够 容易 地 找到 目标 。 而 且 分 类 方法 要 尽量 保持 一 致 ， 如 果 
混用 多 种 分 类 方法 ， 就 容易 使 用 户 感觉 混乱 。 此 外 ， 在 每 个 分 类 选项 的 旁边 或 下 一 行 ， 最 
好 加 上 该 选项 内 容 的 简要 说 明 。 

8) 互动 性 。 互 动 包括 整个 设计 的 呈现 、 使 用 界面 引导 等 ， 都 应 该 掌握 互动 的 原理 ， 让 
用 户 感觉 每 一 步 操作 都 能 得 到 互动 ， 这 部 分 内 容 需 要 设计 上 的 技巧 与 软 硬 件 的 支持 。 

9) 图 像 应 用 技巧 .恰当 使 用 图 像 可 以 让 网 页 增色 不 少 , 但 图 像 应 用 不 当 则 会 适得其反 。 
在 图 像 使 用 上 ， 尽 量 采用 一 般 浏览 器 均 可 支持 的 图 像 压缩 格式 ， 例 如 jpg 与 gf 等 ，jpg 的 
压缩 效果 较 好 ， 适 合 中 大 型 图 像 ， 可 以 节省 传输 时 间 。 

10) 背景 底 色 。 如 果 在 网 页 的 背景 上 添加 一 些 图 像 ， 则 会 影响 阅读 的 时 间 。 所 以 没有 
绝对 必要 的 话 ， 尽 量 避 免 使 用 背景 图 像 ， 保 持 干净 清爽 。 

11) HTML 格式 的 注意 事项 。 为 了 日 后 维护 方便 ， 扎 写 HIML 时 要 架构 完整 。 为 了 优 
化 搜索 ， 可 在 <title>、<meta> 中 添加 关键 字 或 网 站 描述 。 
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12) 避免 滥用 技术 。 使 用 技术 时 ， 首 先 考虑 到 的 技术 是 传输 时 间 ;， 其 次 是 技术 与 网 站 
性 质 及 内 容 相 配合 ， 最 后 ， 技 术 不 要 用 得 太 多 样 而 导致 复杂 。 
网 页 的 具体 制作 ， 在 书 中 后 面 章节 中 会 继续 讲 到 。 


1.4 ”网 站 的 测试 、 发 布 与 维护 


在 将 所 有 的 网 站 制作 完毕 后 ， 就 可 以 将 网 站 发 布 到 Intemet 上 ， 但 是 在 发 布 之 前 必须 


对 网 站 进行 测试 。 





1) 测试 网 站 。 在 测试 网 站 时 ， 除 了 对 所 有 影响 页 面 显示 的 细节 因素 进行 一 次 测试 外 ， 


页 面 中 的 超 链 接 是 否 能 够 正常 跳 转 也 是 一 个 值得 重视 的 问题 。 将 本 地 站 点 文件 夹 在 计算 机 
硬盘 中 移动 位 置 ， 是 测试 超 链接 能 否 正确 工作 的 一 种 简便 方法 。 

2) 发 布 网 站 。 如 果 网 站 在 测试 中 没有 什么 问题 , 那么 就 可 以 着 手 进行 发 布 网 站 的 工作 ， 
在 这 之 前 首先 要 申请 域名 和 Web 服务 器 , 然后 将 网 站 上 传 到 服务 器 上 , 就 可 以 实现 全 球 范 


围 内 的 浏览 。 


3) 随 着 网 站 的 发 布 ， 应 根据 访问 者 的 建议 , 不 断 修改 和 更 新 网 站 中 的 信息 ， 并 从 浏览 
者 的 角度 出 发 ,进一步 完善 网 站 , 另外 网 站 经 过 一 段 时 间 的 运转 后 , 还 需要 不 断 更 新 变化 ， 
丰富 网 站 的 实用 性 和 美观 性 。 


1.5 ”网 站 规划 案例 


1) 网 站 名 称 : XXX 学 校 XXX 社团 网 站 


2) 网 站 建设 目标 


应 社团 需求 ， 经 过 对 需求 的 分 析 整 理 ， 一 致 认为 XXX 社团 网 站 需要 建设 成 为 : 
e 方便 浏览 者 即时 在 线 浏览 社团 信息 的 平台 
e 建立 社团 在 网 上 的 良好 形象 ， 宣 传 社团 








e 利于 学 生 、 学 校 、 








社团 之 间 顺 畅 沟 通 、 交 流 、 互 动 的 通道 








。 利于 管理 人 员 统一 管理 信息 发 布 及 使 用 者 信息 的 平台 
。 建立 社团 信息 和 社团 资源 的 网 上 共享 平台 


3) 目标 实现 要 求 





在 平台 设计 中 ， 建 议 强调 以 下 原则 : 
e 即时 性 ”访问 者 能 够 即时 了 解 社团 最 新 动态 及 相关 信息 ; 管理 人 员 能 够 快速 通过 


管理 后 台 发 布 社 团 


信息 。 


e 实用 性 ”网 站 不 但 能 够 提供 信息 浏览 、 查 询 平 台 ， 而 且 要 求实 现 社团 、 学 校 、 交 


流 、 互 动 的 平台 ， 





让 网 站 更 人 性 化 。 











。 易 用 性 功能 易 上 








， 界 面 清晰 ， 访 问 者 以 最 快 的 速度 找到 所 需 的 信息 及 内 容 ， 做 
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到 一 目 了 然 ， 清 晰 明了 。 
e 安全 性 ”系统 建设 需要 充分 考虑 到 社团 信息 的 保密 性 和 安全 性 ， 尤 其 在 数据 库 设 
计 与 后 期 运行 中 采用 安全 有 效 的 方式 , 实行 深度 防护 一 一 多 模块 操作 ,利用 分 散 的 
防护 策略 来 管理 风险 ; 失败 安全 保护 一 一 在 系统 运行 失败 时 有 相应 的 措施 保障 软件 
安全 。 
4) 网 站 页 面 创意 设计 
网 站 页 面 是 社团 对 外 宣传 的 关键 部 分 ， 是 树立 社团 形象 、 宣 扬 社团 文化 、 展 示 社 团 实 
力 的 必要 途径 。 
@ 首页 设计 
首页 是 社团 整体 形象 的 浓缩 ， 要 进行 创意 设计 。 不 仅 要 美观 简洁 、 大 气 、 专 业 化 ， 还 
要 体现 社团 的 形象 、 社 团 实力 。 
@ 页 面 设 计 
内 页 设计 追求 在 风格 上 统一 ， 但 又 要 因 内 容 不 同 而 各 有 特色 ， 不 同 的 功能 页 面 又 将 体 
现 出 和 功能 内 容 相符 的 个 性 风格 。 
内 页 主要 用 来 实现 一 些 社团 宣传 性 内 容 ， 而 这 些 内 容 更 新 不 是 很 频繁 。 
5) 网 站 栏目 设计 
根据 以 上 分 析 ， 结 合 社团 自身 的 特点 ， 网 站 主要 设计 为 以 下 几 个 模块 
-级 栏目 ， 首 页 、 社 团 简 介 、 社 团 大 事 记 、 社 团 章程 、 社 团 专题 、 电 子 杂 志 、 谈 天 说 
地 和 二 手 交易 。 
二 级 栏目 : i 
画 出 栏目 框架 图 ， 如 图 1.6 所 示 。 


网 站 栏目 设计 
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图 1.6 网 站 栏目 框架 


6) 技术 架构 图 ( 略 ) 

7) 网 站 后 台 功 能 

网 站 的 新 闻 发 布 系统 、 栏 目 设置 系统 、 用 户 管理 系统 、 文 章 搜索 系统 、 客 户 留言 系统 、 
社团 注册 系统 等 。 

这 些 模块 的 具体 实现 可 以 再 根据 需要 改动 ， 功 能 模块 介绍 ( 略 )。 

某 社团 网 站 首页 ， 如 图 1.7 所 示 。 

8) 网 站 的 宣传 与 推广 ( 略 ) 
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图 1.7 飞扬 大 学 生 社团 网 


小 结 
本 章 主要 介绍 了 网 站 规划 的 流程 、 网 站 规划 的 内 容 以 及 网 站 设计 的 原则 等 。 
练 习 题 


1. 什么 是 网 站 规划 ? 网 站 规划 的 流程 是 什么 ? 

2. 网 站 规划 的 内 容 主要 包括 哪些 方面 ? 

3. 你 认为 网 站 设计 应 遵循 的 主要 原则 是 什么 ? 

4. 浏览 Intemet， 推 荐 两 个 优秀 网 站 ， 并 分 析 这 两 个 网 站 的 优点 。 





上 机 实验 


1. 背景 知识 


根据 已 经 掌握 的 网 站 规划 的 知识 ， 自 选 某 个 行业 , 进行 网 站 规划 ,并 写 出 网 站 规划 书 。 
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2. 实验 准备 工作 


保证 Intemet 连接 畅通 ， 在 主机 上 安装 相应 的 网 页 设计 与 制作 软件 : Dreamweaver、 
Fireworks、Flash 和 Photoshop 等 。 


3. 实验 要 求 


确定 某 个 行业 ， 确 定 该 行业 的 某 个 企业 (可 假设 或 实地 联系 企业 ) 为 目标 客户 ， 充 分 了 
解 企 业 的 需求 后 ， 进 行 网 站 规划 ， 并 写 出 网 站 规划 书 。 


4. 课时 安排 
上 机 实验 安排 2 课时 。 
5. 实验 指导 ( 略 ) 
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本 章 主要 介绍 在 开始 网 页 设计 之 前 需要 了 解 的 网 络 知识 ， 如 网 络 基 本 概念 、 网 页 设计 
与 制作 工具 、HTML 语言 等 。 


【本 章 学 习 目 标 】 
通过 本 章 学 习 ， 读 者 能 够 : 

e 了 解 与 网 络 相 关 的 基础 知识 
e 了 解 网 页 设计 与 编辑 工具 
e 掌握 HTML 语言 


2.1 Internet 基础 


2.1.1 Internet 概述 


Intemet 是 相互 连接 的 网 络 集合 。 网络 协议 是 网 络 中 的 设备 进行 通信 时 共同 遵循 的 一 套 
规则 ， 即 以 何 种 方法 获得 所 需 的 信息 。 

Internet 最 初 并 不 是 为 商业 性 和 广泛 使 用 而 设计 的 。 它 起 源 于 1969 年 美国 国防 部 高 级 
研究 计划 署 协助 开发 的 ARPANET。ARPANET 最 初 是 只 允许 国防 部 人 员 进 入 的 封闭 式 网 
络 。 到 了 1987 年 ,在 美国 国家 科学 基金 会 的 推动 下 ，ARPANET 主要 从 军事 用 途 转向 科学 
研究 和 民事 用 途 ， 形 成 了 今天 的 Internet 主干 网 的 雏形 NSFNET。 全 球 网 络 的 发 展 是 空前 
快速 且 出 人 意料 的 , 今天, 查阅 电子 邮件 、 访 问 喜爱 的 网 站 等 活动 已 融入 我 们 的 日 常生 活 。 
从 国内 Intemet 的 发 展现 状 来 看 ，1994 年 4 月 ， 中 国 科学 院 计算 机 网 络 信息 中 心 正 式 
接 入 Intemet。 在 20 多 年 的 时 间 里 ， 中 国 Intemet 发 生 了 飞速 的 发 展 ， 中 国 互联 网 络 信息 中 
心 (CNNIC) 在 北京 发 布 第 38 次 《中 国 互联 网 络 发 展 状况 统计 报告 》， 截 至 2016 年 6 月 ， 
中 国 网 民 规 模 达 7.10 亿 ， 互 联网 普及 率 达 到 51.7%， 超 过 全 球 平均 水 平 3.1 个 百分点 ， 我 
成 名 总 数 增 至 3698 万 个 ，“ 互 联网 +” 行 动 计划 推动 政 企 服务 多 元 化 、 移 动 化 发 展 。 

Intemet 所 提供 的 服务 主要 是 WWW、E-mail、FTP、 在 线 聊天 、 网 上 购物 、 网 络 娱乐 
等 ， 而 其 中 WWW 和 e-mail 是 最 常 使 用 的 服务 。 
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2.1.2 WWW 


WWW(World Wide Web) 简 称 万 维 网 ， 客 户 端 只 要 通过 “浏览 器 ”(Browser) 就 可 以 非 
常 方便 地 访问 Intemet 上 的 服务 器 端 ， 迅 速 地 获得 所 需 的 信息 ， 如 图 2.1 所 示 。 
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图 2.1 WWW 组 成 示意 图 


WWW 是 一 个 容纳 各 种 类 型 信息 的 集合 ， 信 息 主要 以 超 文本 标记 语言 (HTMD) 编 写 的 
网 页 形式 分 布 在 世界 各 地 的 Web 服务 器 上 。 用 户 使 用 浏览 器 来 浏览 , 信息 以 网 页 的 形式 显 
示 在 用 户 的 显示 器 屏幕 上 。 浏 览 器 与 服务 器 之 间 的 信息 交换 使 用 超 文本 传输 协议 [HTTP)。 


2.1.3 ”网 页 与 网 站 


什么 是 网 页 ? 什么 是 网 站 ? 两 者 有 什么 样 的 联系 与 区 别 呢 ? 

构建 WWW 的 基本 单位 是 网 页 。 网 页 中 包含 所 谓 的 “ 超 链接 ”， 通 过 已 经 定义 好 的 关 
键 字 和 图 形 ， 只 要 用 鼠标 轻 轻 一 点 , 就 可 以 自动 跳 转 到 相应 的 其 他 文件 ， 获 得 相应 的 信息 ， 
实现 网 页 之 间 的 链接 ， 从 而 构成 WWW 纵横 交织 的 网 状 结构 。 

通过 超 链接 连接 起 来 的 一 系列 网 页 在 逻辑 上 可 以 视 为 一 个 整体 ， 叫 作 网 站 。 

网 站 的 概念 是 相对 的 ， 大 的 网 站 如 新 浪 、 搜 狐 等 门户 网 站 ， 页 面 非常 多 ， 可 能 分 布 于 
多 台 服 务 器 上 ; 小 的 如 一 些 个 人 网 站 ， 可 能 只 有 几 个 页 面 ， 仅 在 某 台 Web 服务 器 上 占据 很 
小 的 空间 。 

站 点 的 起 始 页 面 通常 被 称 为 “主页 ”或 “首页 ”。 主 页 /首页 是 一 个 网 站 的 开始 ， 因 此 
主页 /首页 的 好 坏 决定 了 这 个 网 站 的 访问 情况 ， 一 般 主页 /首页 的 名 称 是 固定 的 index.htm、 
index.html 或 default.htm 等 。 


2.1.4 域名 与 IP 地 址 


IP 地 址 是 指 互联 网 协议 地 址 (Intemet Protocol Address， 又 译 为 网 际 协议 地 址 )， 是 他 
Address 的 缩写 。IP 地 址 是 下 协议 提供 的 一 种 统一 的 地 址 格式 ， 它 为 互联 网 上 的 每 一 个 网 
络 和 每 一 台 主 机 分 配 一 个 逻辑 地 址 ， 以 此 来 屏蔽 物理 地 址 的 差异 。 

IPv4 是 互联 网 协议 (Intemet Protocol,， IP) 的 第 4 版 , 也 是 第 一 个 被 广泛 使 用 、 构 成 现今 
互联 网 技术 基石 的 协议 ， 新 版 本 是 IPv6。IPv6 正 处 在 不 断 发 展 和 完善 的 过 程 中 ， 在 不 久 的 
将 来 将 完全 取代 目前 被 广泛 使 用 的 IPv4。 

1.IPv4 


按照 TCP/IP 协议 栈 中 的 IPv4 协议 规定 ，IP 地 址 由 32 位 的 二 进 制 数值 构成 。 将 这 个 
二 进 制 数值 分 成 4 组 ， 每 组 8 位 ， 转 换 为 十 进 制 后 ， 用 点 分 隔 ， 比 如 202.100.4.11。 

1) 了 P 地 址 的 结构 

卫 地 址 的 结构 分 为 “网 络 地 址 十 主机 地 址 ”。 同 一 网 络 上 的 所 有 设备 都 有 相同 的 网 络 
地 址 ， 比 如 路 由 器 只 存储 每 一 个 网 段 的 网 络 地 址 (代表 了 该 网 段 内 的 所 有 主机 )。 常 用 的 人 P 
地 址 分 为 A、B、C 三 类 ， 如 图 2.2 所 示 。 
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0 1 2 3 8 16 24 31 
A 0 网 络 号 主机 号 

0 1 包 3 8 16 24 31 
B 1|0 网 络 号 主机 号 

0 1 六 3 8 16 24 31 
起 EE. 网 络 号 主机 号 


图 2.2 人 Pp 地址 的 分 类 


Q@ A 类 地 址 的 高 8 位 代表 网 络 地 址 ， 后 3 个 8 位 代表 主机 地 址 。A 类 地 址 的 范围 为 
1.0.0.0 一 126.255.255.255。A 类 地 址 用 于 超大 型 的 网 络 ， 能 容纳 1600 多 万 台 主 机 。 

@ B 类 地 址 的 前 两 个 8 位 代表 网 络 地 址 , 后 两 个 8 位 代表 主机 地 址 , B 类 地 址 的 范围 
为 128.0.0.0 一 191.255.255.255。B 类 地 址 一 般 用 于 中 等 规模 的 网 络 ， 能 容纳 6 万 多 台 主 机 。 

@ C 类 地 址 的 前 3 个 8 位 代表 网 络 地 址 ， 后 8 位 代表 主机 地 址 。C 类 地 址 的 范围 为 
192.0.0.0 一 223.255.255.255，C 类 地 址 一 般 用 于 小 型 网 络 ， 仅 能 容纳 256 台 主 机 。 

2) 特殊 的 卫 地 址 

@“127” 开 头 的 卫 地 址 ， 用 于 回路 测试 ， 如 127.0.0.1 可 以 代表 本 机 人 PP 地址， 用 
“http:/127.0.0.1” 就 可 以 测试 本 机 中 配置 的 Web 服务 器 。 

@ 人 P 地址 0.0.0.0 对 应 于 当前 主机 ,IP 地 址 255. 255. 255. 255 是 当前 子 网 的 广播 地 址 。 

@ 公有 卫 和 私有 卫 。 

公有 地 址 (public address) 由 InterNIC( 互 联网 信息 中 心 ) 负 责 。 这 些 IP 地 址 分 配给 注册 并 
向 InterNIC 提出 申请 的 组 织 机 构 。 通 过 它 直接 访问 互联 网 。 

私有 地 址 (Private address) 属 于 非 注册 地 址 ， 专 门 为 组 织 机 构 内 部 使 用 。 以 下 列 出 了 留 
用 的 内 部 私有 地 址 : 

A 类 10.0.0.0 一 10.255.255.255 

B 类 172.16.0.0~172.31.255.255 

C 类 192.168.0.0 一 192.168.255.255 

















2. IPv6 


随 着 互联 网 的 迅速 发 展 ，IPv4 定义 的 有 限 地 址 空间 将 被 耗 尽 ， 地 址 空间 的 不 足 必 将 妨 
碍 互联 网 的 进一步 发 展 。 为 了 扩大 地 址 空间 ， 通 过 IPv6 重新 定义 地 址 空间 。IPv6 采用 128 
位 地 址 长 度 ， 几 乎 可 以 不 受 限 制 地 提供 地 址 。 在 Pv6 的 设计 过 程 中 不 仅 解决 了 地 址 短缺 问 
题 , 还 考虑 了 在 IPv4 中 解决 不 好 的 其 他 一 些 问题 , 主要 有 端 到 端 人 P 连接 、 服 务 质 量 (QoS)、 
安全 性 、 多 播 、 移 动 性 、 即 插 即 用 等 (有 兴趣 的 读者 可 查阅 相关 网 络 技术 方面 的 参考 书籍 )。 


3. 域名 的 分 类 


卫 地 址 是 一 串 难以 记忆 的 数字 ， 因 此 从 1985 年 开始 ， 就 引入 了 域名 的 概念 ， 用 具有 
含义 的 字符 来 表示 网 络 中 的 主机 ， 以 便于 浏览 者 访问 。 通 过 DNS 域名 解析 系统 将 域名 解 
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析 到 相应 的 他 地 址 上 ， 这 二 者 之 间 为 对 应 关系 。 
域名 系统 是 一 个 分 层 的 树 状 结构 组 织 ， 如 图 2.3 所 示 ， 最 上 层 是 一 个 无 名 的 根 域 ， 下 








层 为 顶级 域名 ， 接 着 是 二 级 域名 …… 
顶级 域名 的 分 类 有 两 种 ， 一 种 是 按照 组 织 机 构 进行 分 类 ， 另 一 种 是 按 国家 和 地 区 进行 








sina ebay alibaba 
图 2.3 域名 结构 


美国 采用 以 组 织 机 构 分 类 的 形式 ， 而 其 他 国家 按 地 理 划 分 来 分 类 ， 用 代表 国家 或 地 区 
的 缩写 作为 顶级 域名 ,中 国 国内 域名 由 中 国 互联 网 信息 中 心 控制 , 网 址 为 www.cnnic.net.cn。 

按 组 织 机 构 分 类 的 顶级 域名 见 表 2.1， 按 地 理 区 域 分 类 的 顶级 域名 见 表 2.2。 

域名 的 书写 格式 为 : 叶 节 点 名 .二 级 域名 .顶级 域名 。 例 如 : www.sohu.com，www 表示 
Web 服务 器 名 ，sohu 表示 企业 名 称 ，com 表示 顶级 域名 。 


表 2.1 按 组 织 机 构 分 类 的 顶级 域名 














域名 域名 机 构 域名 机 构 
com 商业 机 构 商务 域名 
edu 教育 机 构 公司 域名 
_goV, 政府 部 门 名 片 域名 
int 国际 性 机 构 信息 域名 
mil 军队 姓名 域名 
net 网 络 机构 媒体 域名 
org 非 营利 机 构 手机 域名 











域名 全 称 




















United States 
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2.2 ”网 页 制作 工具 


目前 网 页 制作 工具 较 多 ， 大 多 数 网 页 的 制作 都 是 通过 “所 见 即 所 得 ”的 编辑 工具 完成 
的 。 在 网 页 制作 过 程 中 ， 还 需要 进行 素材 的 创作 和 加 工 ， 即 图 形 和 动画 制作 工具 。 


2.2.1 网 页 编辑 工具 


网 页 编辑 工具 主要 分 为 标记 型 和 所 见 即 所 得 型 。 常 用 的 标记 型 工具 是 Notepad( 记 事 
本 )、Ultraedit 等 。Ultraedit 是 一 套 很 好 用 的 文本 编辑 器 ， 附 有 HTML 标记 颜色 显示 、 搜 寻 
替换 以 及 无 限制 的 还 原 功能 。 所 见 即 所 得 型 的 编辑 主流 软件 是 Dreamweaver， 它 在 HTML 
源 代码 的 精确 性 、 实 用 性 以 及 对 各 种 新 技术 的 支持 上 都 远 超 其 他 同类 软件 。 本 书 主要 介绍 
的 网 页 编辑 工具 是 Dreamweaver。 


2.2.2 ”图 形 和 图 像 处 理工 具 


目前 常用 的 图 形 和 图 像 处 理工 具 主 要 是 Adobe 公司 出 品 的 著名 的 图 形 图 像 处 理 软 件 
Photoshop 和 Justrator。 

Photoshop 的 功能 十 分 强大 ， 是 目前 使 用 最 为 广泛 的 专业 图 形 图 像 处 理 软件 之 一 ， 它 
捆绑 了 Image Ready， 能 够 实现 各 种 专业 化 的 图 像 处 理 及 动画 制作 等 。 本 书 在 后 面 章节 将 
会 对 Photoshop 的 使 用 做 介绍 ，Photoshop 的 工作 界面 如 图 2.4 所 示 。 



































TRY 


图 2.4 Photoshop 工作 界面 




















Jiustrator 是 一 种 应 用 于 出 版 、 多 媒体 和 在 线 图 像 的 工业 标准 矢量 插画 的 软件 ， 作 为 一 
款 非常 好 的 矢量 图 形 处 理工 具 , Tllustrator 广泛 应 用 于 印刷 出 版 、 海 报 书籍 排版 、 专 业 插 画 、 
多 媒体 图 像 处 理 和 互联 网 页 面 的 制作 等 ， 也 可 以 为 线 稿 提供 较 高 的 精度 和 控制 ， 适 合生 产 
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任何 小 型 设计 到 大 型 的 复杂 项 目 。 
2.2.3 ”动画 制作 工具 


Flash 是 目前 网 页 制作 中 最 为 出 色 的 动画 制作 软件 , 是 一 款 交 互 式 动画 设计 工具 , 使 用 
它 可 以 将 音乐 、 声 效 、 动 画 以 及 富有 新 意 的 界面 融合 在 一 起 ， 以 制作 出 高 品质 的 网 页 动态 
效果 。Flash 所 使 用 的 图 形 是 压缩 的 矢量 图 形 , 采用 了 网 络 流 式 媒体 技术 ,突破 了 网 络 带宽 
的 限制 ， 可 以 边 下 载 、 边 播放 ， 从 而 避免 用 户 长 时 间 的 等 待 ， 设 计 者 可 以 随心 所 欲 地 设计 
出 高 品质 的 动画 ，Flash 已 经 慢 慢 成 为 网 页 动画 的 标准 ， 成 为 一 种 新 兴 的 技术 发 展 方向 。 本 
书 将 在 以 后 的 章节 加 以 详细 介绍 。 





2.3 ”HTML 语言 


网 页 的 本 质 是 HTML， 什 么 是 HTML? 

e HTML 指 的 是 超 文本 标记 语言 (Hyper Text Markup Language) 

e HTML 不 是 一 种 编程 语言 ， 而 是 一 种 标记 语言 (markup language) 

e 标记 语言 是 一 套 标记 标签 markup tag) 

e HTML 使 用 标记 标签 来 描述 网 页 

超 文本 使 网 页 之 间 具 有 跳 转 能 力 ， 使 浏览 者 可 以 选择 阅读 路 径 。 通 过 结合 使 用 其 他 的 
Web 技术 (如 脚本 语言 、 公 共 网 关 接 口 、 组 件 等 )， 可 以 创造 出 功能 强大 的 网 页 。 

使 用 HIML 编写 的 Web 页 面 又 称 为 HTML 文件 ， 这 种 文件 一 般 以 “html” 或 “htm” 
为 扩展 名 ， 使 用 网 页 编辑 工具 创建 HTML 文件 。 


2.3.1 HTML 语法 结构 
HTML 文件 的 所 有 控制 语句 被 称 为 标签 ， 标 签 在 一 对 尖 插 号 之 间 ， 格 式 如 下 : 
< 标签 >HIML 语言 元 素 </ 标 签 > 


标签 分 为 成 对 标签 和 非 成 对 标签 ， 比 如 : <table>...</table> 为 成 对 标签 , 而 <br>、<hr> 
等 属于 非 成 对 标签 。 标 签 忽略 大 小 写 ， 书 写 格式 非常 灵活 。 可 使 用 标签 的 属性 来 进一步 限 
定 标签 ， 一 个 标签 可 以 有 多 个 属性 项 ， 各 属性 项 的 次 序 不 限定 ， 各 属性 项 之 间 用 空格 来 进 
行 分 隔 。 例 如 : <img src="images/girl.gif' width="100" height="87">。 

HTML 中 使 用 的 注释 语句 为 <!-- 注 释 内 容 -->, 注释 内 容 可 插入 HIML 代码 中 的 任何 位 
置 ， 注 释 内 容 不 会 显示 在 网 页 中 。 例 如 : <!-- 我 是 有 名 的 网 页 设计 大 师 ， 看 我 做 的 网 站 是 
不 是 非常 漂亮 ?--> 


【 例 1.1】 一 个 简单 的 HTML 文件 ， 运 行 结果 如 图 2.5 所 示 。 


<!DOCTYPE html> 
<head> 
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<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 带 您 走 入 网 络 世 界 </title></head> 

<body> 

<hl>dreamweaver 将 带 你 进入 网 络 世界 </h1> 

<h2> 准 备 好 了 吗 ?</h2> 

<p> <img src="bigmap.gif" width= "370" height="235" border="0"></p> 
<p><a hre 仁 "http://www.adobe.com"> 网 页 三 剑客 </a></p> 











</body> 
</html> 
Ee)| 
D cE 和 Nm x 和 
| CG 合 | fileV/W/F/ 教 这 /网 页 设计 /网 页 设计 与 从 
洪 应 用 自 书 冬 
dreamweaver 带 你 进入 网 络 世 界 


准备 好 了 吗 ? 











图 2.5 简单 的 网 页 实例 


2.3.2 ”常见 的 HTML 标签 (HTML5 标准 ) 
































常见 的 HTML 标签 如 表 2.3 所 示 。 
表 2.3 常见 的 HTML 标签 
标签 描述 
基础 
<!DOCTYPE> 定义 文档 类 型 
<html> 定义 一 个 HTML 文档 
<title> 一 个 标题 
<body> 定义 文档 的 主体 
<hl> to <h6> 定义 HIML 标题 
<p> 定义 一 个 段落 
<br> 
<hr> 
二 !--.…--> 
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( 续 表 ) 
标签 描述 
格式 
<acronym> HTMLS5 不 再 支持 ， 定 义 只 取 首 字母 的 缩写 
<abbr> 定义 一 个 缩写 
<address> 定义 文档 作者 或 拥有 者 的 联系 信息 
<b> 定义 粗 体 文本 
<bdi>(HTMLS5 新 增 ) 允许 设置 一 段 文本 ， 使 其 脱离 父 元 素 的 文本 方向 设置 
<bdo> 定义 文本 的 方向 
<big> HTMLS5 不 再 支持 ， 定 义 大 号 文本 
<blockquote> 定义 块 引 用 
<center> HTML5 不 再 支持 ，HTML 4.01 已 废弃 ， 定 义 居中 文本 
<cite> 定义 引用 (citation) 
<code> 定义 计算 机 代码 文本 
<del> 定义 被 删除 文本 
<dfn> 定义 项 目 
<em> 定义 强调 文本 
<font> HTMLS5 不 再 支持 ，HTML 4.01 已 废弃 ， 定 义 文本 的 字体 、 尺 十 和 颜色 
<i> 定义 斜体 文本 
<ins> 定义 被 插入 文本 
<kbd> 定义 键盘 文本 


<mark>(HTMLS5 新 增 ) 
<meter>(HIMLS 新 增 ) 


义 带 有 记号 的 文本 
度量 衡 ， 仅 用 于 已 知 最 大 值 和 最 小 值 的 度量 






<pre> 定义 预 格式 文本 
<progress>(HTMLS5 新 增 ) 7 中 的 任务 进度 (进程 ) 


<q> 





定义 短 的 引用 





<rp>(HTMLS5 新 增 ) 


定义 不 支持 ruby 元 素 的 浏览 器 所 显示 的 内 容 





<rt>(HTMLS5 新 增 ) 


























<ruby>(HTMLS5 新 增 ) 定义 mby 注释 (中 文 注 

<s> 定义 加 删除 线 的 文本 

<samp> 定义 计算 机 代码 样本 

<small> 定义 小 号 文本 

<strike> HTML5 不 再 支持 ，HIML 4.01 已 废弃 ， 定 义 加 删除 线 的 文本 
<strong> 定义 语气 更 为 强烈 的 强调 文本 

<sub> 定义 下 标 文本 

<sup> 定义 上 标 文本 

<time>(HTML5 新 增 ) 定义 日 期 /时 间 








HTMLS5 不 再 支持 ， 定 义 打字 机 文本 
定义 下 划 线 文本 
定义 文本 的 变量 部 分 
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( 续 表 ) 

标签 描述 
<wbr>(HTMLS5 新 增 ) 规定 在 文本 中 的 何 处 适合 添加 换行 符 
表单 
<form> 定义 HTML 表单 ， 用 于 用 户 输入 
<input> 定义 输入 控件 
<textarea> 定义 多 行 的 文本 输入 控件 
<button> 定义 按钮 
<select> 定义 选择 列表 (下 拉 列 表 ) 
<optgroup> 定义 选择 列表 中 相关 选项 的 组 合 
<option> 定义 选择 列表 中 的 选项 
<label> 定义 input 元 素 的 标注 
<fieldset> 定义 围绕 表单 中 元 素 的 边框 
<legend> 定义 fieldset 元 素 的 标题 





<datalist>(HTMLS5 新 增 ) 规定 了 input 元 素 可 能 的 选项 列表 


<keygen>(HTMLS5 新 增 ) 


规定 用 于 表单 的 密 钥 对 生成 器 字段 









<output>(HTMLS 新 增 ) 定义 计算 的 结果 

框架 

<frame> HTMLS5 不 再 支持 ， 定 义 框架 集 的 窗口 或 框架 

<frameset> HTMLS5 不 再 支持 ， 定 义 框 

<noframes> HTMLS5 不 再 支持 ， 定 义 针对 不 支持 框架 的 用 户 的 替代 内 容 
<iframe> 定义 内 联 框架 

图 像 

<img> 定义 图 像 

<map> 定义 图 像 映射 

<area> 定义 图 像 地 图 内 部 的 区 域 





<canvas>(HTMLS 新 增 ) 


通过 脚本 (通常 是 JavaScripb 来 绘制 图 形 (比如 图 表 和 其 他 图 像 ) 





<figcaption>(HTMLS 新 增 ) 


为 figure 元 素 定 义 标题 





<figure>(HTMLS5 新 增 ) 
AudioVideo 
<audio>(HTMLS5 新 增 ) 


figure 标签 用 于 对 元 素 进行 组 合 


定义 声音 ， 比 如 音乐 或 其 他 音频 流 





<source>(HIMLS 新 增 ) 


定义 media 元 素 (<video> 和 <audio>) 的 媒体 资源 





<track>(HTMLS5 新 增 ) 


为 媒体 (<video> 和 <audio>) 元 素 定 义 外 部 文本 轨道 





<video>(HTML5 新 增 ) 
链接 


定义 一 个 音频 或 视频 











<a> 定义 一 个 链接 
<link> 定义 文档 与 外 部 资源 的 关系 
<nav>(HTMLS 新 增 ) 定义 导航 链接 


列表 


<ul> 





定义 一 个 无 序列 表 
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( 续 表 ) 
标签 描述 
<ol> 定义 一 个 有 序列 表 
<l> 定义 一 个 列表 项 
<dir> HTML5 不 再 支持 ，HTML 4.01 已 废弃 ， 定 义 目 录 列 表 
<dl> 定义 一 个 定义 列表 
<dt> 定义 一 个 定义 列表 中 的 项 目 
<dd> 定义 列表 中 项 目的 描述 
<menu> 定义 菜单 列表 
<command>(HTML5 新 增 ) | 定义 用 户 可 能 调用 的 命令 (比如 单 选 按 钮 、 复 选 框 或 按钮 ) 
表格 
<table> 定义 一 个 表格 
<caption> 定义 表格 标题 
<th> 定义 表格 中 的 表 头 单元 格 
<tr> 定义 表格 中 的 行 
<td> 定义 表格 中 的 单元 
<thead> 定义 表格 中 的 表 头 内 容 
<tbody> 定义 表格 中 的 主体 内 容 
<tfoot> 定义 表格 中 的 表 注 内 容 ( 脚 注 ) 
<col> 定义 表格 中 一 列 或 多 列 的 属性 值 
<colgroup> 定义 表格 中 供 格式 化 的 列 组 
样式 / 节 
<style> 定义 文档 的 样式 信息 
<div> 定义 文档 中 的 节 
<span> 定义 文档 中 的 节 
<header>(HTMLS5 新 增 ) 定义 文档 头 部 
<footer>(HTML5 新 增 ) 定义 文档 底部 
<section>(HTMLS5 新 增 ) 定义 文档 的 某 个 区 域 
<article>(HTML5 新 增 ) 定义 文章 内 容 
<aside>(HTML5 新 增 ) 定义 其 所 处 内 容 之 外 的 内 容 
<details>(HITMLS 新 增 ) 定义 用 户 可 见 的 或 隐藏 的 需求 的 补充 细节 
<dialog>(HTMLS5 新 增 ) 定义 对 话 框 或 窗口 
<summary>(HTMLS5 新 增 ) | 定义 一 个 可 见 的 标题 ， 当 用 户 单 击 标题 时 会 显示 出 详细 信息 
元 信息 
<head> 定义 关于 文档 的 信息 
<meta> 定义 关于 HTML 文档 的 元 信息 
<base> 定义 页 面 中 所 有 链接 的 默认 地 址 或 默认 目标 
<basefont> HIMLS 不 再 支持 , HTML 4.01 已 废 弃 ， 定义 页 面 中 文本 的 默认 字体 、 颜 
色 或 尺寸 
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( 续 表 ) 
标签 描述 
程序 
<script> 定义 客户 端 脚本 
<noscript> 定义 针对 不 支持 客户 端 脚 本 的 用 户 的 替代 内 容 
<applet> HTML5 不 再 支持 ，HTML 4.01 已 废弃 ， 定 义 嵌 入 的 applet 
<embed>(HTMLS 新 增 ) 定义 一 个 容器 ， 用 来 嵌入 外 部 应 用 或 互动 程序 (插件 ) 
<object> 定义 嵌入 的 对 象 
<param> 定义 对 象 的 参数 





读者 要 想 了 解 更 多 的 信息 ， 可 查阅 HIML 相关 书籍 进行 研究 和 学 习 。 
小 结 


本 章 主要 介绍 了 : 

1. 网 络 基 础 知识 。 

1) Intemet 的 起 源 与 发 展 、 国 内 Internet 的 发 展现 状 。 

2) WWW 的 概念 ，WWW 的 访问 方式 及 网 络 协 议 。 

3) 域名 及 人 P 地 址 的 概念 ， 域 名 和 人 P 地 址 之 间 的 关系 。 

2. 网 页 制作 工具 : 网 页 编辑 工具 、 图 像 及 动画 制作 工具 。 
3. HTML 语言 简介 。 


练 习 题 


(1) 什么 是 Intemet? 叙述 Internet 的 产生 与 发 展 。 

(2) 什么 是 WWW? 如 何 访问 WWW? 

(3) 耳 地 址 与 域名 之 间 的 关系 如 何 ? 

(4) HTML 文件 中 的 标签 是 否 区 分 大 小 写 ? 格式 有 无 严格 要 求 ? 


上 机 实验 


1. 背景 知识 
根据 已 经 掌握 的 网 络 知 识 和 本 章 学 习 的 HTML 语言 的 知识 ， 编 写 简单 网 页 的 源 代码 ; 
浏览 网 站 ， 分 析 网 站 的 特点 。 
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2. 实验 准备 工作 


保证 Intemet 连 接 畅通 ， 在 主机 上 安装 相应 的 网 页 设计 与 制作 软件 : Dreamweaver、 
Fireworks、Flash 和 Photoshop 等 。 


3. 实验 要 求 

1) 打开 浏览 器 ， 浏 览 某 个 网 页 ， 查 看 其 源 代 码 ， 了 解 HTML 代码 的 含义 。 

2) 打开 记事 本 ， 使 用 HTML 语言 编写 一 个 简单 的 网 页 ， 网 页 中 要 包含 以 下 内 容 : 网 
页 标题 、 文 字 、 图 像 、 表 格 、 超 链接 等 。 

3) 上 网 浏览 不 同 的 电子 商务 网 站 ， 比 如 淘宝 、 联 想 等 ， 分 析 站 点 结构 、 站 点 风格 及 网 
页 配色 等 ， 写 出 网 站 分 析 报 告 。 

4. 课时 安排 

上 机 实验 安排 1 课时 。 

5. 实验 指导 

1) 如 何 查 看 网 页 源 代码 ? 

打开 浏览 器 ， 在 网 页 中 单 击 右键 ， 在 弹出 的 菜单 中 选择 “查看 网 页 源 代码 ”命令 。 

2) 如 何 编写 HTML 代码 ? 

打开 记事 本 ， 手 工 编写 HTML 代码 ， 注 意 HTML 代码 的 编写 顺序 及 网 页 元 素 对 应 的 
标签 。 保 存 网 页 时 ， 网 页 的 后 级 名 为 html 或 htm。 
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本 章 主要 介绍 Dreamweaver CC 的 主要 功能 、 工 作 界 面 及 各 个 面板 的 用 途 














【本 章 学 习 目 标 】 
通过 本 章 学 习 ， 读 者 能 够 : 
e 了 解 Dreamweaver CC 工作 界面 的 组 成 






e 掌握 Dreamweaver CC 常用 的 工具 面板 和 工具 栏 的 功能 等 
e 掌握 管理 站 点 的 方法 : 创建 本 地 站 点 、 编 辑 站 点 


。 了 解 如 何 将 本 地 站 点 信息 上 传 到 远程 站 点 
3.1 Dreamweaver CC 简介 


Adobe Dreamweaver CC 是 美国 Adobe 公司 官方 新 发 布 的 一 款 网 页 制作 工具 ， 是 集 网 
页 制作 和 网 站 管理 于 一 身 的 网 页 编辑 器 。 使 用 Adobe Dreamweaver CC 能 够 快速 、 方 便 、 
高 效 地 完成 网 页 设计 。Adobe Dreamweaver CC 支持 CSS 编辑 器 、jQuery 库 代 码 自动 完成 
功能 等 ， 是 专门 为 网 页 设计 师 量 身 定制 的 可 视 化 网 页 制作 软件 ， 利 用 它 可 以 方便 、 快 捷 地 
制作 跨 平 台 和 跨 浏览 器 的 动感 网 页 。 由 于 它 界 面 友好 、 实 用 性 强 ， 具 有 强大 的 在 线 更 新 功 
能 ， 并 且 在 无 须 编写 任何 代码 的 情况 下 也 可 以 快速 创建 页 面 而 深 受 广大 网 页 设计 人 员 的 欢 
迎 ， 其 启动 画面 如 图 3.1 所 示 。 
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3.2 ”Dreamweaver CC 的 工作 界面 


Dreamweaver CC 是 目前 Dreamweaver 系列 产品 的 最 新 版 本 ， 它 在 原来 版 本 的 功能 
础 之 上 进行 了 改进 和 升级 ， 功 能 更 加 强大 ， 界 面 更 美观 ， 操 作 更 方便 ， 也 更 适 于 网 页 制作 
和 网 站 管理 。 


1. 工作 界面 一 览 


Dreamweaver CC 的 工作 界面 由 “菜单 ” 栏 、“ 插 入 ” 栏 、“ 文 档 ” 窗 口 、“ 文 档 ” 
工具 栏 、 状 态 栏 、“ 属 性 ”面板 、 集 成 工作 面板 等 组 成 ， 如 图 3.2 所 示 。 


成 工 
i 集成 工作 面板 


DW sn oad | 


ndechml x 
BE 








“文档 ”窗口 








EA) PRIM) Wrto) mo ms Bw war 














“标签 ”选择 器 



































E23 
ms 
让 本 | au 一 忆 避 人 
文 习作 町 | 天 全 旷 祥 生 BE 
3 2016/Y 712 (EJ 
“属性 ”面板 文件 面板 
图 3.2 Dreamweaver CC 的 工作 界面 
2， “插入 ” 栏 


“插入 ” 栏 包含 用 于 创建 网 页 对 象 (如 表格 、 表 单 、 图 像 等 ) 的 功能 按钮 。 这 些 按钮 被 分 
类 组 织 到 各 个 选项 卡 中 ， 如 图 3.3 所 示 。 当 把 鼠标 指针 移 到 一 个 按钮 上 时 ， 会 出 现 一 个 工 
具 提 示 ， 其 中 含有 按钮 的 名 称 ， 若 按钮 旁 有 一 个 向 下 的 黑色 箭头 ， 它 就 是 一 个 按钮 组 ， 单 
击 可 选择 不 同 的 按钮 ， 执 行 不 同 的 命令 。 
用 | | 入 站 | 表单 |jQuey Mobile |jQuey UL | 术 呈 | 收 庆 玉 | 
加 于 回回 - 目 9- 吕 8 回归 凶 回 多 - 
图 33 “插入 ” 栏 


























“26。 网 站 规划 与 网 页 设计 (第 二 版 ) 


3. “菜单 ” 栏 
“菜单 ” 栏 提 供 了 程序 功能 的 选项 命令 ， 可 以 通过 “菜单 ” 栏 中 的 命令 完成 某 项 特定 
操作 ， 如 图 3.4 所 示 。 


Dw ” 文 tp 党 SB 三 看 M 修改 (M) ”之 式 (0) 命令 (OQ 站 点 ($) 窗口 (W) 帮助 (H) 
index html* 











4. “文档 ”工具 栏 

“文档 ”工具 栏 中 主要 包含 了 一 些 对 文档 进行 常用 操作 的 功能 按钮 ， 可 在 文档 的 不 同 
视图 间 进 行 快速 切换 : “代码 ”视图 、“ 设 计 ” 视 图 、 同 时 显示 “代码 ”和 “设计 ”视图 
的 拆 分 视图 。“ 文 档 ” 工 具 栏 中 还 包含 一 些 与 查看 文档 、 在 本 地 和 远程 站 点 间 传 输 文 档 有 
关 的 常用 命令 和 选项 ， 如 图 3.5 所 示 。 


显示 代码 和 设计 视图 





WE ES 到 





显示 代码 视图 显示 设计 视图 
文件 管理 


图 3.5 “文档 ”工具 栏 
5. “文档 ” 窗口 


通过 “文档 ”窗口 可 以 显示 、 创 建 和 编辑 当前 文档 ， 可 以 在 “设计 ”视图 、“ 代 码 ” 
视图 或 “ 拆 分 ”视图 中 查看 和 编辑 文档 。 
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Py 
“文档 ”窗口 的 状态 栏 位 于 “文档 ”窗口 的 底部 ， 作 用 是 提供 与 用 户 正 编辑 的 文档 有 
关 的 某 些 信息 ， 如 当前 窗 











大 小 、 文 档 大 小 和 估计 下 载 时 间 等 ， 如 图 3.6 所 示 。 
| EL [本 HT 


ba 

















设计 视图 
代码 视图 
拆 分 视图 
标签 选择 器 状态 栏 
E> © Ci ©.70x sv 
图 3.6 “文档 ”窗口 
6. “属性 ”面板 


“属性 ”面板 并 不 是 将 所 有 的 属性 加 载 到 面板 上 ， 而 是 根据 所 选择 的 对 象 来 动态 显示 
对 象 的 属性 ，“ 属 性 ”面板 的 状态 完全 随 当前 在 文档 中 选择 的 对 象 而 定 。 例 如 ， 当 前 选择 
了 一 幅 图 像 ， 那 么 “属性 ”面板 上 就 出 现 该 图 像 的 相关 属性 ， 如 果 选 择 了 表格 ， 那 么 “ 属 
性 ”面板 会 相应 地 变化 成 表格 的 相关 属性 ， 如 图 3.7 所 示 。 
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加 了: v| 豆 四 。 目标 四 
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演 握 上牌 痊 标题 人 D ] 





认 背景 颜色 (G) 厂 -| | 
一 一 交 生 直 G) 昧 人 v 高 儿 














标题 (E) 
图 3.7 “属性 ”面板 





注意 : 


对 于 文本 、 单 元 格 等 多 种 网 页 元 素 进行 属性 设置 时 ， 属 性 面板 中 有 两 个 选项 : HIML 


和 CSS。 选择 HIML， 设 置 的 属性 是 基于 HIML 标签 的 ; 选择 CSS， 设 置 的 属性 是 基于 
CSS 样式 的 。 
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3.3 定义 本 地 站 点 





在 Dreamweaver 中 ，“ 站 点 ”一 词 既 表 示 Web 站 点 ， 又 表示 属于 Web 站 点 的 文档 的 
本 地 存储 位 置 。 在 开始 构建 Web 站 点 之 前 ， 需 要 建立 站 点 文档 的 本 地 存储 位 置 。 
Dreamweaver 站 点 可 组 织 与 Web 站 点 相关 的 所 有 文档 、 跟 踪 和 维护 链接 、 管 理 文件 、 共 
享 文件 以 及 将 站 点 文件 传输 到 Web 服务 器 上 。 

要 制作 一 个 能 够 被 大 家 浏览 的 网 站 ， 首 先 需 要 在 本 地 磁盘 上 制作 ， 放 置 在 本 地 磁盘 上 
的 网 站 被 称 为 本 地 站 点 ， 传 输 到 位 于 互联 网 Web 服 务 器 上 的 网 站 被 称 为 远程 站 点 。 
Dreamweaver CC 提供 了 对 本 地 站 点 和 远程 站 点 的 强大 管理 功能 。 

应 用 Dreamweaver CC 不 仅 可 以 创建 单独 的 文档 ， 还 可 以 创建 完整 的 Web 站 点 。 


3.3.1 创建 站 点 


在 Dreamweaver CC 中 可 以 有 效 地 建立 并 管理 多 个 站 点 。 

在 创建 站 点 前 ， 先 在 本 地 磁盘 上 创建 一 个 以 英文 或 数字 命名 的 空 文件 夹 ， 比 如 在 DD 盘 
新 建 一 个 文件 夹 myweb， 并 在 此 文件 夹 中 建立 子 文件 夹 images， 用 于 存放 图 像素 材 ， 然 后 
再 创建 本 地 站 点 。 

方法 一 : 启动 Dreamweaver CC， 选 择 “ 站 点 ”菜单 一 “新 建站 点 ”命令 。 

方法 二 : 单 击 “ 窗 口 ”菜单 一 “文件 ”命令 (快捷 键 F8) ， 打 开 “ 文 件 ” 面 板 ， 单 击 
下 拉 框 中 的 “管理 站 点 ”命令 ， 如 图 3.8(a) 所 示 ， 再 单 击 “ 新 建站 点 ”按钮 ， 如 图 3.8(b) 
所 示 。 
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图 3.8 利用 “文件 ”面板 创建 站 点 
弹出 “站 点 设置 对 象 未 命名 站 点 1 ”对话 框 ， 在 对 话 框 左 侧 有 “站 点 ”、“ 服 务 器 ” 
“版 本 控制 ”和 “高 级 设置 ”4 个 选项 卡 ， 可 以 在 选项 卡 之 间 切 换 。 下 面 选择 “站 点 ”选项 
卡 ， 如 图 3.9 所 示 。 


1) 在 “站 点 名 称 ” 文 本 框 中 输入 一 个 站 点 名 字 ， 用 于 在 Dreamweaver 中 标识 
ha 此 处 输入 为 “myweb”， 
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Dreamweaver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 


一 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 赤 和 名 称 。 
站 点 名 称 : [myweb 
本 地 站 点 文件 夹 : [D: myweb\ 















































图 3.9 命名 站 点 和 设置 站 点 路 径 


点 文件 夹 ”文本 框 设置 为 站 点 目录 文件 夹 。 
单 击 “ 高 级 设置 ”选项 卡 ， 出 现 高 级 设置 界面 ， 设 置 默认 图 像 文件 夹 ， 此 处 选择 


D:myweb\images(9 注 意 : images 文件 夹 应 包含 在 站 点 目录 文件 夹 中 )， 


择 “ 文 档 ”，“Web URL” 可 不 填 ， 如 图 3.10 所 示 。 


Contribute 

模板 

jQuery 

W 由 字体 

Edge Animate 资 原 








默认 图 像 文件 夹 : [D: mywebymages 
链接 相对 于 ; 加 文档 口 站 点 根 目录 


Web URL: [htp:// 

















如 果 没 有 定义 远 ， 请 输入 
，Dreamweaver 有 a 


口 区 分 大 小 写 的 链接 检查 
对 启用 组 存 
全 和 生生。 这 将 加 快 资源 面板 和 榜 





























图 3.10 设置 默认 图 像 文件 夹 


3) 单 击 “ 服 务 器 ”选项 卡 ， 单 击 “ 添 加 新 服务 器 ”按钮 ， 如 图 3.11 所 示 。 


。29 。 


将 “本 


“链接 相对 于 ” 先 
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您 将 在 此 位 置 选择 承载 Web 上 的 页 面 的 服务 器 。 此 对 话 框 的 设置 来 自 
Internet 服务 提供 商 (SP) 或 Web 管理 员 。 





= | 地 让 | 连接 | 运 得 | 测 式 | 
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图 3.11 添加 服务 器 
4) 弹出 对 话 框 ， 在 此 处 设置 服务 器 信息 ， 如 图 3.12 所 示 。 



































































































































图 3.12 连接 远程 服务 器 


(1) 在 “服务 器 名 称 ” 文 本 框 中 输入 文本 ， 指 定 服务 器 的 名 称 。 从 “连接 方法 ”弹出 
菜单 中 选择 “FTP”。 

(2) 在 “FTP 地 址 ”文本 框 中 , 输入 要 将 本 地 站 点 文件 上 传 到 的 远程 FTP 服务 器 的 地 
址 , FTP 地 址 是 计算 机 系统 的 完整 Intemet 名 称 (9 注意 : 如 果 不 知道 FTP 地 址 ,请 与 Web 
服务 器 提供 商 联 系 )。 

端口 21 是 接收 FTP 连接 的 默认 端口 ， 如 要 修改 端口 号 ， 在 右 侧 的 文本 框 中 更 改 默 
认 端 口号 ， 保 存 更 改 设置 后 ， 在 FTP 地 址 的 结尾 将 附 上 一 个 冒号 和 新 的 端口 号 。 
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(3) 在 “用 户 名 ”和 “密码 ”文本 框 中 , 输入 用 于 连接 到 FTP 服务 器 的 用 户 名 和 密码 。 
单 击 “测试 ”， 测 试 FTP 地 址 、 用 户 名 和 密码 。 

(4) 在 “ 根 目 录 ” 文 本 框 中 ， 输 入 远程 服务 器 上 用 于 存储 公开 显示 的 文档 的 目录 。 

(9 注意 : 如 果 不 能 确定 根 目 录 ， 请 与 服务 器 管理 员 联系 或 将 文本 框 保留 为 空白 。 在 有 
些 服 务 器 上 ， 根 目录 就 是 首次 使 用 FTP 连接 到 的 目录 。 若 要 确定 这 一 点 ， 请 连接 到 服务 
器 。 如 果 出 现在 “文件 ”面板 “远程 服务 器 ”视图 中 的 文件 夹具 有 像 public html、www 
或 用 户 名 这 样 的 名 称 ， 它 可 能 就 是 应 该 在 “ 根 目录 ”文本 框 中 输入 的 目录 )。 

在 “Web URL” 文 本 框 中 , 输入 Web 站 点 的 URL 地 址 , Dreamweaver 使 用 Web URL 
创建 站 点 根 目录 相对 链接 ， 并 在 使 用 链接 检查 器 时 验证 这 些 链 接 。 

5) 单 击 “ 高 级 ”标签 ， 进 入 “远程 服务 器 ”和 “测试 服务 器 ”设置 。 

如 果 希 望 自动 同步 本 地 和 远程 文件 , 请 选择 “维护 同步 信息 ”( 默 认 情况 下 选择 该 选项 )。 
如 果 和 希望 在 保存 文件 时 Dreamweaver 将 文件 上 传 到 远程 站 点 ， 请 选择 “保存 时 自动 将 文 
件 上 传 到 服务 器 ”。 如 果 希 望 激活 “ 存 回 /取出 ”系统 ， 请 选择 “启用 文件 取出 功能 ”。 如 
果 使 用 的 是 测试 服务 器 ， 请 从 “服务 器 模型 ”弹出 菜单 中 选择 一 种 服务 器 模型 。 如 图 3.13 
所 示 ， 最 后 ， 单 击 “ 保 存 ” 结 束 站 点 的 创建 。 
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图 3.13 服务 器 高 级 设置 


3.3.2 ”管理 站 点 


单 击 “ 站 点 ”菜单 一 “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 进 行 新 建 、 编 辑 、 
删除 、 复 制 站 点 以 及 导入 或 导出 站 点 等 操作 。 

下 面 以 修改 站 点 的 名 称 、 改 变 站 点 对 应 的 本 地 根 文件 夹 路 径 为 例 进行 讲解 。 

1) 单 击 “ 管 理 站 点 ”对 话 框 中 的 “编辑 ”按钮 ， 如 图 3.14 所 示 。 
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3.14 管理 站 点 


2) 弹出 “myweb 的 站 点 定义 为 ”对 话 框 ， 单 击 “ 站 点 ”选项 卡 ， 修 改 站 点 的 名 称 、 
站 点 的 路 径 等 ， 单 击 “ 高 级 设置 ”选项 卡 ， 修 改 图 像 的 存储 路 径 ， 参 见 前 面 的 图 3.8 和 


图 3.9。 
3.3.3 创建 网 页 


在 建 好 站 点 之 后 ， 就 可 以 创建 网 页 了 。 
1. 新 建 网 页 


在 Dreamweaver 中 ， 创 建 网 页 的 方法 很 多 ， 此 处 介绍 以 下 3 种 方法 。 
方法 一 : 打开 “文件 ”面板 , 在 站 点 根 文件 夹 下 单 击 鼠 标 右键 ， 从 弹出 菜单 中 选择 “新 


建文 件 ”命令 。 


方法 二 : 启动 Dreamweaver 后 ， 窗 口中 会 出 现 一 个 启动 界面 ， 单 击 “ 创 建新 项 目 ” 下 
面 的 “HTML” 项 ， 即 可 创建 网 页 ， 如 图 3.15 所 示 。 


最 近 浏 览 的 文件 新 建 
mywebindex html my 3 中 
名 打开 M4 二 ” 
HTML css Js 


ma wn ey 
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Bootstrap ”后 动 差错 板 
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3.15 ”利用 启动 界面 创建 网 页 
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方法 三 : 选择 “文件 ”菜单 一 “新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 如 图 3.16 所 
示 ， 选 定 “ 空 白 页 ”选项 卡 中 的 “HTML”， 单 击 “ 创 建 ” 按 钮 ， 即 可 创建 网 页 ， 默 认 名 
称 为 “Untitled-1”。 
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吕 rie 模板 mm 文档 
文 机 类型 
布 看 | 添加 型 文档 头 ” 
附加 css 文件 - 





图 3.16 利用 “新 建文 档 ” 对 话 框 创建 网 页 


2. 保存 网 页 

网 页 在 编辑 过 程 中 或 编辑 完成 后 , 要 及 时 保存 。 用 户 可 选择 “直接 保存 ”"、“ 男 存 为 ”、 
“保存 为 模板 ”等 命令 。 

1) 保存 文件 。 选 择 “ 文 件 ” 菜 单一 “保存 ”命令 ， 如 果 是 第 一 次 保存 ， 会 弹出 “ 男 存 
为 ”对 话 框 , 选择 保存 文件 的 位 置 , 在 “文件 名 ”文本 框 中 输入 保存 文件 的 名 称 ， 如 图 3.17 
所 示 ; 如 果 不 是 第 一 次 保存 ， 则 会 直接 履 盖 保存 。 保 存 网 页 的 快捷 键 为 Ctrl+S。 


个 国 “ LENOvo (D) ，myweb » 
新 建文 伯 夫 
> 要 - 修改 日 基 za 型 


县 images 2016/7/23 10:24 。 文件 夫 




















保存 类 型 (D: |All Documents Chtm;*.htmb*.shtm;".shtml*xhtmb".stm:".ssi;"js;*json:.appcache; xml*xs Y 





Unicode 运 项 -. 

















图 3.17 “另存 为 ”对 话 框 
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2) 另存 为 文件 。 选 择 “ 文 件 ” 菜 单一 “另存 为 文件 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 
将 已 经 保存 的 文件 另存 到 其 他 位 置 ， 或 重新 命名 保存 。 

3) 保存 为 模板 。 选 择 “文件 ”菜单 “另存 为 模板 ”命令 ， 弹 出 “另存 为 模板 ”对 话 
框 ， 输 入 模板 的 名 称 ， 单 击 “ 保 存 ” 将 文件 保存 为 模板 。 


小 结 


本 章 主要 介绍 了 : 

1. Dreamweaver CC 的 工作 界面 。 

. Dreamweaver CC 常用 的 工具 面板 和 工具 栏 的 功能 等 。 
. 管理 站 点 : 创建 本 地 站 点 、 编 辑 站 点 等 。 

. 简单 网 页 的 制作 。 

. 将 本 地 站 点 信息 上 传 到 远程 站 点 。 


练 习 题 





上 mm 


简 述 定义 本 地 站 点 的 流程 。 
上 机 实验 


1. 背景 知识 

根据 本 章 所 学 的 内 容 ， 创 建站 点 和 网 页 。 

2. 实验 准备 工作 

在 本 地 磁盘 上 创建 一 个 空 文件 夹 myweb， 并 创建 一 个 子 文件 夹 mages。 
3. 实验 要 求 

创建 站 点 和 创建 网 页 。 要 求 : 定义 本 地 站 点 和 新 建 一 个 网 页 。 

4. 课时 安排 

上 机 实验 安排 1 课时 。 

5. 实验 指导 


1) 定义 本 地 站 点 ， 新 建 若 干 文件 夹 ， 如 images、flash 等 ， 有 些 文件 夹 可 暂时 为 空 ， 
以 备 将 来 存放 设 定 的 内 容 。 
2) 在 定义 好 的 站 点 下 新 建 一 个 网 页 ， 第 一 个 网 页 为 index.htm 或 index.html。 
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本 章 主要 介绍 网 页 中 包含 的 网 页 元 素 以 及 如 何 编辑 网 页 。 


【本 章 学 习 目 标 】 

通过 本 章 学 习 ， 读 者 能 够 : 

e 掌握 如 何 进 行 页 面 属性 的 设置 

e 掌握 文本 的 修饰 方法 

掌握 设置 各 类 超 链 接 的 方法 

掌握 图 像 技 术 : 插入 图 像 、 制 作 翻转 图 像 、 制 作 图 像 映 射 等 
掌握 在 网 页 中 插入 Flash 动画 和 Flash 视频 


4.1 实例 导 人 和 人: 咖啡 吧 


【 例 4.1】 咖啡 吧 ， 网 站 首页 如 图 4.1 所 示 。 


p> 





< pn 
se De < 


图 41 咖啡 吧 网 站 首页 
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该 网 站 实例 包含 了 若干 个 网 页 ， 在 网 页 中 输入 文本 、 插 入 图 像 、 建 立 超 链接 等 多 种 网 
页 元 素 ， 涉 及 的 知识 点 有 以 下 几 点 : 

1) 页 面 属性 的 设置 。 

2) 文本 的 修饰 。 

3) 插入 图 像 。 

4) 插入 图 像 对 象 实现 特效 。 

5) 在 多 个 网 页 之 间 建 立 超 链接 。 





4.2 页 面 属性 的 设置 


网 页 制作 的 第 一 步 是 设置 页 面 属 性 ， 操 作 步 又 如 下 : 

1) 打开 “页 面 属性 ”对 话 框 ， 设 置 相应 的 参数 。 

方法 一 : 单 击 “ 属 性 ”面板 一 “页 面 属性 ”按钮 ， 弹 出 “页 面 属性 ”对 话 框 。 

方法 二 : 选择 “修改 ”菜单 一 “页 面 属性 ”命令 ， 弹 出 “页 面 属性 ”对 话 框 。 

2) 选择 “外 观 (CSS)” 选 项 卡 ， 设 置 “ 页 面 字体 ”为 默认 字体 、“ 大 小 ”为 14 像素 ， 
“背景 颜色 ”为 深 灰色 (#CCC)、 页 边 距 均 为 0， 如 图 4.2 所 示 。 





Y 注 意 : 
“外 观 ”选项 卡 有 两 类 : 外 观 (CSS) 选 项 卡 的 设置 基于 CSS 样式 ， 将 自动 生成 CSS 样 
式 代码 ; 外 观 (HTML) 选 项 卡 的 设置 基于 HTML 样式 ， 将 自动 生成 HIML 标签 。 


外 观 〈css) 
页 面 字体 (z): [加 默认 字体 |v| 
大 小 (8): | 14 
文本 颜色 (IT) 
背景 颜色 (B) 
背景 图 像 (I) 
重复 (E) 





左边 距 加 ) 右边 距 (8): 0 
上 边 距 (E): 0 下 边 距 (Q): 0 








5] 














图 4.2 “外观 ” 选 项 卡 
3) 选择 “标题 /编码 ”选项 卡 ， 在 “标题 ”文本 框 输入 “咖啡 吧 ”， 如 图 4.3 所 示 。 网 


页 在 浏览 时 ， 网 页 标题 会 出 现在 浏览 器 的 标题 栏 中 ， 设 置 网 页 的 编码 格式 为 “简体 中 文 
(GB2312)”。 
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标题 (了 ) :咖啡 吧 


文档 类 型 (pTD): | DIDIL 1.0 Transitional v 


编码 人) ;| 简体 中 文 (GB2312) | 重新 载 入 (BR) 
tnicode 标准 化 表单 (D)- 元 vv 
包括 Unicode 签名 (BOM) (8) 
文件 文件 夹 : 了: \ 网 站 规划 与 网 页 设计 \coffee BAR\ 
站 点 文件 夹 : 了 :\ 网 站 规划 与 网 页 设计 \coffee BAR\ 



































图 43 “标题 /编码 ”选项 卡 
4) 选择 “跟踪 图 像 ” 选 项 卡 ， 单 击 “ 跟 踪 图 像 ”文本 框 右 侧 的 “浏览 ”按钮 ， 选 择 图 
片 文件 ， 拖 动 透明 度 滑 块 来 设置 跟踪 图 像 的 透明 度 ， 如 图 4.4 所 示 。 


跟踪 图 像 
跟踪 图 像 (C): |inages/ 草 图 . jpg 
透明 度 (Z) 
透明 














图 44 “跟踪 图 像 ” 选 项 卡 


y 注 意 : 

跟踪 图 像 是 事先 用 图 像 设计 软件 绘制 的 网 页 草图 ， 是 用 于 设计 网 页 布局 的 图 片 ， 不 会 
出 现在 浏览 器 中 。 

最 后 单 击 “ 确 定 ”按钮 ， 完 成 “页 面 属性 ”的 设置 。 





4.3 文本 的 修饰 


修饰 文本 是 最 基本 的 网 页 制作 技能 ， 例 如 : 字体 的 修饰 、 段 落 的 对 齐 方式 等 。 
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4.3.1 输入 文本 


要 在 网 页 中 输入 文本 ， 可 直接 输入 ， 也 可 在 其 他 应 用 程序 中 复制 文本 ， 然 后 切换 到 
Dreamweaver 的 文档 窗口 中 并 进行 粘贴 。 下 面 就 文本 中 的 其 他 情况 加 以 说 明 。 

1. 换行 和 段落 分 段 

1) 换行 

单 击 快捷 键 Shift+Enter， 或 单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “字符 ”选项 一 “换行 
符 ” 按 钮 ， 如 图 4.5 所 示 ， 其 HTML 标签 为 <br>。 

















2) 段落 分 自 
按 回 车 键 ， 其 HTML 标签 为 <p>。 


2. 输入 特殊 字符 


1) 输入 连续 空格 

单 击 “插入 ” 栏 一 “常用 ”选项 一 “不 换行 空格 ”按钮 ， 其 HTML 标签 为 “&nbsp:”， 
或 切换 到 中 文 全 角 状 态 ， 按 空格 键 。 

2) 输入 特殊 字符 

单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “字符 ”选项 一 某 个 特殊 字符 按钮 ， 如 图 4.5 所 示 。 

3. 插入 水 平 线 


在 网 页 中 插入 一 条 水 平 线 ， 可 以 将 网 页 元 素 分 隔 开 ， 看 起 来 整齐 、 清 晰 。 单 击 “ 插 入 ” 
栏 一 “常用 ”选项 一 “水 平 线 ” 按 钮 ， 如 图 4.6 所 示 。 选 中 水 平 线 ， 可 在 “属性 ”面板 中 
设置 水 平 线 的 属性 ， 水平线 的 高 度 、 宽 度 、 是 否 有 阴影 等 。 如 果 要 修改 水 平 线 的 颜色 ， 必 
须 修改 HTML 代码 。 在 “文档 ”工具 栏 中 ， 单 击 “ 代 码 视图 ”， 切 换 到 代码 视图 ， 相 应 的 
HTML 代码 如 下 : 


| 




















<hr width="500" size="1" noshade="noshade" color="#00CC00"> 
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EF 本 回身 -上 自 D- 吕 $8 日 要 四 回 图- 


图 4.6 插入 水 平 线 























4. 文本 特殊 格式 : 上 标 和 下 标 
【 例 4.2】 输入 数学 公式 X*+Y =Z1。 针 对 其 中 字体 的 特殊 格式 一 一 上 标 与 下 标的 操 
作 步 骤 如 下 : 


在 “文档 ”工具 栏 中 ， 单 击 “代码 视图 ”按钮 ， 切 换 到 代码 视图 ， 直 接 输 入 HTML 代 
码 : X<sup>2</sup>+Y<sup>3</sup>=Z<sub>1<sub>， 如 图 4.7 所 示 。 









| index html" x 
ed Cat [| 


Cldoctype htnl> 
品 2 tn 
head> 
| neta charset="gb2312"》 X2+Y3-Z 1 
品 | 5 《title 无 标题 文档 人 /title> 
6 </heady 





人 国 四 codr 

由 9 。 XKsup>2《/sup?+YKsup?3K/sup)=ZKsub1Ksub》 
10 《/body> 
1 /htal> 








图 4.7 上 标 和 下 标的 代码 编辑 及 结果 显示 


4.3.2 文本 属性 的 设置 


文本 属性 的 设置 可 通过 “属性 ”面板 或 “格式 ”菜单 来 设置 ， 下 面 以 在 “属性 ”面板 
中 设置 文本 属性 为 例 进 行 讲解 。 

设置 文本 属性 时 ， 有 两 种 选项 ， 即 HIML 和 CSS 样式 ， 两 者 之 间 可 以 切换 。 本 小 节 
主要 讲解 利用 “CSS” 选 项 定义 文本 属性 时 ， 设 置 文本 大 小 、 字 体 样式 、 字 体 类 型 以 及 文 
本 颜色 。 

在 “属性 ”面板 中 选择 “CSS” 选 项 时 ， 要 定义 新 的 CSS 样式 或 应 用 已 定义 的 CSS 
样式 ， 可 选择 “目标 规则 ”下 拉 框 中 的 某 个 选项 ， 如 图 4.8 所 示 。 


《新 内 联 样式 》 Iv| 
编目 ETEER 


~ 








图 4.8 文本 属性 的 设置 


1) 文本 大 小 常用 的 单位 是 像素 (px) 或 点 数 (pt)， 正 文通 常 选择 12 像素 或 14 像素 。 

2) 字体 样式 是 指 字符 的 外 观 样式 ， 例 如 粗 体 、 和 斜体 、 下 划 线 等 。 

3) 在 网 页 中 ， 文 本 可 设置 显示 为 不 同 的 字体 类 型 。 但 网 页 正文 一 般 设 置 为 默认 字体 ， 
为 选择 了 某 种 字体 ， 但 如 果 在 浏览 者 客户 端的 计算 机 中 没有 安装 ， 那 么 字体 仍 以 默认 字 
体 显示 。 


4) 文本 颜色 值 以 十 六 进 制 数值 表示 。 








加 
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设置 方法 如 下 : 


在 “属性 ”面板 中 选择 CSS 选项 ， 选 中 文本 ， 单 击 “ 属 性 ”面板 中 文本 “大 小 ”下 拉 
杠 ， 选 择 某 个 选项 ， 如 图 4.9 所 示 。 









> HHL 目标 规则 “新 内 联 样式 > 加 
本 cs 亡 疾 噶 风 _] [css 面板 四] | 大 小 5) 绪 加 ~j 辑 | 



























[页 同性.…] | 绚 夫 项 目 
图 4.9 文本 大 小 的 设置 

单 击 “CSS 面板 ”按钮 在 右 侧 集成 面板 中 会 弹出 “CSS 设计 器 ”面板 ， 在 “ 源 ”选项 

Ph 单 击 “+” 号 选择 “在 页 面 中 定义 ”， 如 图 4.10(a) 所 示 。 在 面板 中 选择 <style>， 在 @ 媒 

体面 板 中 选择 “全 局 ”， 将 光标 放 在 需要 编辑 的 内 容 的 后 面 ， 之 后 添加 选择 器 ， 在 选择 器 
面板 中 选择 需要 编辑 内 容 的 标签 ， 就 可 以 对 内 容 进行 编辑 了 ， 如 图 4.10(b) 所 示 。 











吕 


才 居 一 处 CSs 大 六 半 闪 和 染 各 媒 检 全 入 


已 计算 
< 内 联 样式 > : body 









































图 4.10(@b) CSS 设计 器 
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还 可 以 定义 字体 样式 、 字 体 类 型 以 及 文本 颜色 等 ， 单 击 “ 属 性 ”面板 中 “字体 ” 右 侧 


的 下 拉 列表 ， 选 择 “ 管 理 字 体 ”， 单 击 “ 字 体 颜色 ”， 在 弹出 的 拾 色 器 中 ， 选 择 颜 色 ， 如 
图 4.11 所 示 。 


Fes 起 Ww 二 。 自 定 义 字 伯 失 术 
请 定时 认 字 村 拉 开 二 过 从 下 到 可 入 休 让 这 和 字 兴 二 如 自己 的 拉 棋 




















字 笨 (0) | 回 w Romar。 serif vjitdic vjbold vv 宇和 替 短 宣 
大 小 (S) 14 vx ~ | J 


(b) 定义 文本 颜色 (©) 定义 字体 样式 
图 4.11 设置 “文本 ”属性 


4.3.3 段落 格式 的 设置 


设置 段落 格式 时 ， 在 “属性 ”面板 中 选择 的 是 “HIML” 选 项， 然后 定义 段落 格式 。 

段落 是 指 具 有 统一 样式 的 一 段 文 本 。 标 题 是 用 于 强调 段落 主题 的 文本 ， 所 以 用 加 强 的 
效果 来 表示 。 标 题 分 为 6 级 ，] 级 标题 显示 的 文字 最 大 ，6 级 标题 显示 的 最 小 , 通常 标题 文 
字 在 浏览 器 中 显示 为 粗 体 并 自动 换行 。 

设置 方法 如 下 : 选中 文本 ， 单 击 “ 属 性 ”面板 中 的 “格式 ”下 拉 列 表 ， 选 择 段落 或 某 
级 标题 ， 如 图 4.12 所 示 。 





《>TDaE| 格式 他) | 段落 v 类 | 无 v BT 党 
怒 css ml) 衬 接 (L) v 








图 4.12 标题 与 段落 的 设置 
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设置 段落 缩 进 


设置 方法 : 选中 段落 ， 或 把 光标 放 在 段落 中 ， 单 击 “ 属 性 ”面板 的 缩 进 按钮 ， 如 果 取 
消 缩 进 ， 单 击 取消 缩 进 按钮 即 可 ， 如 图 4.13 所 示 。 

















[<> mu] 格式 人 ) 段落 v 类 无 v BT 


ba css DI) 无 ~v” 匀 接 (L) v 
文档 标题 无 标题 文档 页 面 属性 表 项 目 


图 4.13 段落 缩 进 的 设置 

















4.3.4 列表 格式 的 设置 


列表 是 比较 常见 的 一 种 文本 排版 格式 ， 常 用 来 格式 化 网 页 中 包含 逻辑 关系 的 文本 信 
息 。 列 表格 式 分 为 编号 列表 和 项 目 列表 ， 如 图 4.14 所 示 。 





国产 电影 < 一 一 一 一 项 目 列表 


。 欧美 电影 








， 2015 评 分 最 高 外 语 电影 : 

。 2015 评 分 最 高 华语 电 虹 

.。 2015 最 受 关注 的 院 线 电影 
国产 电影 


灾 故 事 > < 一 一 编号 列表 
宫 》 
游记 之 大 至 归来 》 





00 


。 老 炮 儿 
。 烈日 灼 心 -到 一 一 其 套 列 表 
。 十 二 公民 
图 4.14 列表 格式 
1. 项 目 列表 


设置 方法 如 下 : 选中 段落 文本 ， 单 击 “ 属 性 ”面板 中 的 “项 目 列表 ”按钮 。 

列表 中 的 项 目 符号 可 以 更 改 ， 比 如 把 项 目 符号 从 @ 修 改 为 多 ， 方 法 是 将 光标 放 在 列表 
文本 中 ， 单 击 “ 属 性 ”面板 中 的 “列表 项 目 ” 按 钮 ， 弹 出 “列表 属性 ”对 话 框 ，“ 列 表 类 
型 ”选择 “项 目 列表 ”， 单 击 “ 样 式 ” 下 拉 列 表 ， 选 择 “ 正 方形 ”样式 ， 如 图 4.15 所 示 。 








列表 类 型 ([) : 项目 列 表 名 


样式 G): | 呈 认 ] 可 
有 (数字 ) 
列表 项 目 


新 建 样式 四: [点 认 ] v 
(数字 ) 





图 4.15 列表 属性 的 设置 
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2. 编号 列表 

设置 方法 与 项 目 列表 相似 ， 通 过 有 序 的 编号 可 以 更 清楚 地 表达 信息 的 顺序 。 

设置 方法 如 下 : 选中 段落 文本 ， 单 击 “ 属 性 ”面板 中 的 “编号 列表 ”按钮 。 

列表 中 的 编号 样式 和 开始 计数 值 均 可 更 改 ， 将 光标 放 在 列表 文本 中 ， 单 击 “ 属 性 ” 面 
板 中 的 “列表 项 目 ”按钮 ， 弹 出 “列表 属性 ”对 话 框 ， 列 表 类 型 选择 “编号 列表 ”， 单 击 
“样式 ”下 拉 列 表 ， 选 择 编号 样式 ， 在 “开始 计数 ”文本 框 中 输入 数值 ， 便 修改 了 开始 计 
数值 。 

3. 赃 套 列表 

幸 套 列表 存在 父 列表 和 子 列表 的 逻辑 关系 。 设 置 方法 如 下 : 在 已 定义 好 的 列表 中 ， 选 
中 作为 子 列表 的 若干 列表 ， 单 击 “ 属 性 ”面板 中 的 “文本 缩 进 ”按钮 ， 从 而 实现 列表 之 间 
的 棋 套 关系 。 刀 套 列表 可 以 是 有 序 嵌 套 列表 、 无 序 嵌 套 列表 和 混合 嵌 套 列表 。 


4.3.5 滚动 文本 


在 网 页 中 如 何 让 文本 或 图 片 自动 滚动 ， 并 且 当 鼠标 经 过 时 ， 文 本 会 停 下 来 ， 鼠 标 移 开 
时 继续 滚动 呢 ? 设置 方法 如 下 : 
代码 如 下 : 











<marquee> 滚 动 的 文本 段落 </marquee> 

可 在 <marquee> 标 签 内 添加 一 些 参数 ， 参 数 之 间 用 空格 隔 开 ， 使 得 文本 的 滚动 方式 有 
些 变化 ， 例 如 ; 

<marquee direction="up" onmouseover="this.stop0" onmouseout= "this.start0" behavior="scroll" > 欢迎 访 
问 咖啡 吧 的 网 站 </marquee> 

direction， 表 示 滚 动 的 方向 ，up( 向 上 )、down( 疝 下 )、left( 向 左 ， 默 认 )、right( 向 右 )。 

behavior: 表示 滚动 的 方式 ，scroll( 滚 动 ， 默 认 )、alterate( 交 替 )、slide( 移 动 )。 

onmouseover="this.stop( )": 表示 鼠标 经 过 时 ， 文 本 停留 。 

onmouseout="this.start( )": 表示 鼠标 移 开 时 ， 文 本 开始 滚动 。 


4.4 设置 超 链接 


超 链接 是 组 成 网 站 的 基本 元 素 ， 通 过 超 链 接 将 多 个 网 页 组 成 一 个 网 站 ， 浏 览 者 通过 超 
链接 选择 阅读 路 径 。 超 链接 是 通过 URL( 统 一 资源 定位 符 ) 来 定位 目标 信息 的 。 


.44。 网 站 规划 与 网 页 设计 (第 二 版 ) 
4.4.1 URL 地 址 


1. 绝对 URL 


绝对 URL 是 指 Intemet 上 资源 的 完整 地 址 ， 包 括 完整 的 协议 类 型 、 计 算 机 域名 或 他 
地 址 、 包 含 路 径 信息 的 文档 名 。 书 写 格式 如 下 : 
协议 : /计算 机 域名 或 瑟 地 址 [: 端 口号 ][/ 文 档 路 径 ] [/ 文 档 名 ] 
例如 : http://www.mydrivers.com/download/download.htm 
常用 的 协议 有 以 下 几 种 : 
HITP: 超 文 本 传输 协议 
FTP: 文件 传输 协议 
MAILTO: 传送 E-mail 协议 
例如 : http://www.sina.com.cn 
ftp://ftp.newhua.com 
mailto:duyonghong@163.com 
若 采用 协议 的 默认 端口 号 ， 可 以 省 略 ; index.htm、index.html 或 default.htm 是 默认 首 
页 名 称 ， 可 以 省 略 。 
2. 相对 URL 


相对 URL 指 文件 与 链接 目标 之 间 的 相对 位 置 关系 ， 一 般 是 指 相同 站 点 内 的 链接 。 

链接 到 同一 路 径 的 文档 ， 直 接 输入 文件 名 即 可 ， 如 products.htm。 

链接 到 同一 路 径 下 子 文件 夹 的 文档 ， 先 输入 子 文件 夹 名 和 和 斜 杠 (/)， 再 输入 文件 名 ， 如 
yule/ music.htm。 

链接 到 上 一 级 路 径 中 ， 要 在 文件 名 前 输入 “../”， 如 “../index.htm”。 


4.4.2” 超 链接 的 分 类 


超 链接 的 分 类 有 很 多 种 ， 按 链接 目标 的 不 同 ， 超 链接 分 为 文件 链接 、 锚 记 链接 、 电 子 
邮件 链接 ， 按 链接 单 击 对 象 的 不 同 ， 超 链接 分 为 文字 链接 、 图 像 链接 、 图 像 映射 等 。 


1. 文件 链接 
文件 链接 是 指 链接 目标 是 其 他 网 页 或 文件 ， 浏 览 者 单 击 超 链 接 时 将 跳 转 到 相应 的 网 页 
或 显示 相应 的 文件 。 


设置 方法 如 下 : 选中 创建 超 链接 的 文本 或 图 像 ， 在 “属性 ”面板 的 “链接 ”文本 框 中 
输入 URL 地 址 ， 或 单 击 “链接 ”文本 框 右 侧 的 “浏览 文件 ”按钮 ， 如 图 4.16 所 示 。 弹 出 
“选择 文件 ”对 话 框 ， 选 择 相应 的 文件 ， 如 图 4.17 所 示 。 

镑 接 代 ) | Se 目标 (@) 


图 4.16 设置 超 链接 
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修改 日 期 


2016/7/2222:02 。 Lebao HTMLD. 
2016/7/22 0:28 。。 屋 登 样式 雪 文 档 











图 4.17 “选择 文件 ”对 话 框 


yY 注 意 : 

如 果 超 链接 文件 是 浏览 器 支持 的 文件 夹 格 式 ， 如 html、jpg 格式 等 ， 那 么 浏览 器 将 直 
接 打开 该 文件 ; 当 超 链接 的 目标 文件 不 是 浏览 器 支持 的 文件 格式 ， 如 zip、rar、exe 格式 等 ， 
单 击 超 链接 时 ， 将 会 弹出 “文件 下 载 ” 对 话 框 。 因 此 制作 文件 下 载 链接 时 ， 可 将 文件 压缩 
为 zip 或 rar 格式 ， 供 浏览 者 下 载 。 

2. 锚 记 链接 

为 了 方便 浏览 者 浏览 篇 幅 较 长 的 网 页 ， 可 利用 错 记 链接 实现 页 面 之 间 的 快速 跳 转 。 操 
作 步 又 如 下 : 

1) 在 代码 视图 中 给 需要 锚 记 标记 的 文字 之 后 添加 <a name="a" id="a"></a>， 代 码 如 下 
所 示 ， 参 见 图 4.18(a)。 

<p align="center" class="style4"> 关 于 我 们 <a name="a" id="a"></a><p> 

<p align="center" class="STYLE4"> 关 于 我 们 <a name="a" id="av></a 炒 /p> 
图 4.18(a) 添加 锚 记 标记 

2) 随后 选中 导航 信息 ， 拖 动 滚动 条 到 链接 目标 处 ， 单 击 “ 属 性 ”面板 中 “链接 ”文本 

框 右 侧 的 “指向 文件 ”按钮 ， 拖 动 到 锚 记 标记 感 处 即 可 ， 如 图 4.18(b) 所 示 。 此 时 “链接 ” 


文本 框 中 出 现 : # 锚 记名 称 。 因 此 也 可 直接 在 “链接 ”文本 框 中 输入 : # 锚 记名 称 。 当 单 
击 导 航 信息 时 ， 直 接 跳 转 到 相应 的 链接 目标 处 。 


二 网 站 规划 与 网 页 设计 (第 二 版) 





EL。 3 可 
本 css DO 无 “| 他 





除了 创建 同一 页 面 中 的 锚 记 链接 外 ， 还 可 创建 指向 不 同 页 面 的 锚 记 链接 ， 此 时 只 要 将 
超 链 接 指定 为 “包含 锚 记 链接 页 面 的 URI# 该 网 页 的 锚 记 名 称 ” 即 可 。 

3. 空 链接 

空 链接 一 般 默 认 指 向 当前 页 面 ， 并 不 会 打开 新 的 网 页 文件 。 此 种 链接 并 不 常用 ， 一 般 
会 和 JavaScript 脚本 语言 配合 使 用 ， 以 达到 一 些 特殊 的 网 页 特效 。 

设置 方法 如 下 : 在 “属性 ”面板 的 “链接 ”文本 框 中 输入 一 个 单独 的 “#” 号 ， 即 表 
示 一 个 空 链接 。 

4. 电子 邮件 链接 


电子 邮件 链接 是 指 当 浏览 者 单 击 超 链接 时 ， 系 统 会 启动 客户 端 电子 邮件 程序 (例如 
Outlook Express)， 并 打开 新 邮件 窗口 ， 使 访问 者 能 方便 地 撰写 电子 邮件 。 操 作 步 骤 如 下 : 

1) 将 光标 定位 到 需要 插入 电子 邮件 链接 的 位 置 。 

2) 选择 “插入 ” 栏 一 “常用 ”选项 一 “电子 邮件 链接 ”按钮 。 

3) 弹出 “电子 邮件 链接 ”对 话 框 ， 输 入 链接 文本 和 电子 邮件 地 址 ， 如 图 4.19 所 示 。 
或 选中 要 创建 链接 的 文本 或 图 像 ， 在 “属性 ”面板 的 “链接 ”文本 框 中 直接 输入 mailto: 
电子 邮件 地 址 。 


文本 ，|[ 瑟 我 联系 





电子 邮件 : |xa-dhy@163. com 














图 4.19 “电子 邮件 链接 ”对 话 框 


4.4.3 选择 链接 目标 
设置 好 链接 文件 后 , 还 应 该 选择 打开 链接 文件 的 目标 , 即 打开 链接 文件 的 浏览 器 窗口 。 


第 4 章 制作 页 面 “47。 


设置 方法 如 下 : 单 击 “ 属 性 ”面板 的 “目标 ”下 拉 列 表 ， 选 择 某 项 参数 ， 如 图 4.20 所 示 。 





怒 css IDG) 无 v ， 馆 接 (L) # 人 @ 和 和 目标 (9 
文档 标题 [_ 页面 属 性 .. | 列 赤 硕 目 blany 
ae 
-salt 
to 





图 4.20 链接 目标 的 选择 


具体 参数 如 下 所 述 ; 

1) _blank: 表示 在 新 的 浏览 器 窗口 中 打开 链接 文件 。 

2) _self: 表示 在 当前 窗口 中 打开 链接 文件 ， 默 认 状 态 。 

3)_parent: 表示 在 包含 框架 结构 的 上 一 级 浏览 器 窗口 中 打开 链接 文件 。 
4) _top: 删除 框架 结构 ， 在 整个 浏览 器 窗口 中 打开 链接 文件 。 

5) new: 将 链接 文档 载 入 一 个 新 的 窗口 。 


4.5 ”制作 包含 超 链 接 的 纯 文 本 网 站 


本 节 通 过 一 个 简单 的 网 站 实例 来 复习 巩固 前 面 所 学 的 内 容 。 

1. 定义 本 地 站 点 

启动 Dreamweaver 软件 ， 选 择 “ 站 点 ”菜单 一 “新 建站 点 ”命令 ， 创 建 本 地 站 点 ， 并 
在 站 点 根 目录 下 创建 三 个 文件 夹 : shige、sanwen、xiaoshuo。 

2. 制作 首页 

首页 如 图 4.21 所 示 ， 制 作 过 程 如 下 所 述 : 


欢迎 访问 风 清 月 影 的 同 站 


青 








图 4.21 首页 效果 图 


A 网 站 规划 与 网 页 设计 (第 二 版 ) 


1) 新 建 一 个 空白 网 页 ， 单 击 “ 属 性 ”面板 一 “页 面 属性 ”按钮 ， 弹 出 “页 面 属性 ”对 
话 框 ， 进 行 如 下 设置 : 

在 “外 观 CSS” 选 项 卡 中 , 设置 页 面 字体 大 小 为 14 像素 ,设置 背景 图 像 为 images/3ejpg， 
设置 页 边 距 均 为 0。 

在 “标题 / 编码 ”选项 卡 中 ,设置 网 页 标题 为 “青年 文摘 ”; 单 击 “ 确 定 ” 按 钮 。 保 
存 该 网 页 ， 将 其 命名 为 index.htm。 

2) 输入 文本 “青年 文摘 ”, 输入 每 个 文字 后 按 回 车 键 实现 竖 排 效 果 。 选中 文本 , 在 “ 属 
性 ”面板 中 设置 字体 为 “华文 楷体 ”、 字 体 大 小 为 36 像素 、 对 齐 方式 为 居中 ， 如 图 4.22 
所 示 。 


v| 匡 匡 | 雪 本 


~ | 字体 (@ | 馈 华文 模 体 ~ v 
EE] 二 二 





文 机 是 | 机 性 





图 4.22 文本 设置 


3) 在 “青年 ”后 插入 特殊 字符 : 选择 “插入 ” 栏 一 “常用 ”选项 一 “字符 ”选项 一 “其 
他 字符 ”按钮 ， 弹 出 “插入 其 他 字符 ”对 话 框 ， 选 择 圆 点 字符 ， 单 击 “ 确 定 ” 按 钮 ， 如 图 
4.23 所 示 。 

4) 单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “水 平 线 ” 按 钮 ， 插 入 一 条 水 平 线 ， 在 “属性 ” 
面板 中 设置 水 平 线 的 高 度 和 宽度 ， 取 消 选 中 “阴影 ” 复 选 框 ， 切 换 到 代码 视图 ， 在 <hr> 标 
签 内 添加 color: “#6C0”。 

5) 按 Enter 键 , 输入 “散文 ”， 按 “Shift+\” 组 合 键 , 输入 “| ”， 同 理 输入 “诗歌 | ” 
和 “小 说 ”。 

6) 按 Enter 键 ， 选 择 “ 插 入 ” 栏 一 “常用 ”选项 一 “字符 ”选项 一 “© 版 权 ” 按 钮 ， 
输入 “版 权 所 有 : 2015 风 清 月 影 ”。 
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图 4.23 “插入 其 他 字符 ”对 话 框 
7) 输入 文本 “友情 链接 ”， 选 中 “友情 链接 ”， 在 “属性 ”面板 一 “链接 ”文本 框 中 
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输入 链接 地 址 http:/www.hongxiu.com。 

8) 切换 到 中 文 全 角 状 态 ， 单 击 “ 空 格 ” 键 ， 单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “电子 
邮件 链接 ”按钮 ， 在 弹出 的 “电子 邮件 链接 ”对 话 框 中 输入 文本 “与 我 联系 ”， 输 入 邮件 
地 址 susan0513@sina.com。 

9) 在 网 页 最 上 方 ， 输 入 文本 “欢迎 访问 风 清 月 影 的 网 站 ”， 切 换 到 代码 视图 ， 在 此 文 
本 前 后 分 别 输 入 代码 <marquee> 和 </marquee>。 

3 制作 “散文 精 选 ” 页面 


“散文 精 选 ”页 面 如 图 4.24 所 示 ， 人 制作 过 程 如 下 : 





图 4.24 “散文 精 选 ”页 面 的 效果 图 


1) 新 建 一 个 空白 网 页 ， 在 “文档 ”工具 栏 一 “标题 ”文本 框 中 输入 “散文 精 选 ”， 将 
网 页 保存 到 sanwen 文件 夹 中 ， 网 页 名 为 index.htm。 

2) 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ， 打 开 “ 页 面 属性 ”对 话 框 ， 设 置 字体 大 
小 为 14 像素 ， 设 置 背景 颜色 为 “#FC9”。 

3) 在 “文档 ”窗口 中 输入 “散文 精 选 ”， 并 设置 其 字体 为 “隶书 ”， 字 体 大 小 为 36 
像素 ， 字 体 颜 色 为 # 63F， 文 本 对 齐 方式 为 “居中 ”。 

4) 按 Enter 键 ， 再 输入 导航 文本 “首页 | 散文 | 诗歌 | 小 说 ”。 选 中 “首页 ”， 单 
击 “ 属 性 ”面板 中 “链接 ”文本 框 右 侧 的 “浏览 文件 ”按钮 , 选择 站 点 根 目 录 下 的 index.htm， 
“链接 ”文本 框 中 显示 “../index.htm”。 

5) 单 击 “插入 ” 栏 一 “常用 ”选项 一 “水 平 线 ” 按 钮 ,插入 一 条 水 平 线 ， 单 击 “ 插 入 ” 
栏 一 “常用 ”选项 一 “日 期 ”按钮 ， 弹 出 “插入 日 期 ”对 话 框 ， 选 择 日 期 格式 ， 如 图 4.25 
所 示 。 

6) 按 Enter 键 ， 输 入 几 段 文本 作为 散文 题目 的 列表 ， 分 别 设置 编号 列表 和 项 目 列表 ， 
通过 文本 缩 进 实现 嵌 套 列表 等 。 

7) 按 Enter 键 ， 插 入 鲁迅 的 画像 图 ， 并 输入 鲁迅 的 一 篇 散文 “ 藤 野 先生 ”标题 及 散文 
内 容 。 
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星期 格式 ，[ 不 要 星期 ] 
日 期 格式 : 


74/3/7 
1974 年 3 月 ?日 
03/07/1974 
3/7/74 
/3/74 

: [不 要 时 间 ] 


储存 时 自动 更 新 























图 4.25 “插入 日 期 ”对 话 框 

8) 设置 锚 记 链接 : 首先 在 “ 藤 野 先生 ”标题 文本 处 插入 “命名 锚 记 ”标记 ， 在 散文 目 
录 处 选中 “ 茧 野 先生 ”， 移 动 滚动 条 到 锚 记 标记 处 ， 单 击 “ 属 性 ”面板 中 “链接 ”文本 框 
右 侧 的 “指向 文件 ”按钮 ， 拖 动 到 锚 记 标记 处 ， 松 开 鼠 标 即 可 。 

9) 最 后 添加 其 他 页 面 内 容 ， 并 设置 超 链接 ， 完 成 站 点 的 制作 。 

4. 站 点 测试 

在 网 页 编辑 状态 ， 按 F12 键 在 浏览 器 中 浏览 网 页 ， 查 看 超 链 接 是 否 能 够 正常 跳 转 ， 并 
确保 每 个 网 页 都 有 适当 的 网 页 标题 。 








4.6 使 用 图 像 


图 像 是 网 页 中 非常 重要 的 元 素 ， 在 网 页 中 添加 精致 、 美 观 的 图 像 ， 会 使 网 页 变 得 丰富 
多 彩 。 在 插入 图 像 时 ， 首 先 要 考虑 图 像 在 页 面 中 的 整体 效果 ， 其 次 应 综合 考虑 图 像 的 质量 
和 下 载 速度 。 目 前 网 页 中 支持 的 图 像 格 式 有 以 下 三 种 : 

1) GIF: 索引 颜色 格式 ， 最 多 支持 256 色 ， 为 无 损 压 缩 ， 有 透明 处 理 的 功能 ， 支 持 动 
画 效 果 。 

2) JPG: 联合 图 像 专家 组 ， 有 较 高 的 压缩 比 ， 属 于 有 损 压 缩 ,支持 真 色彩 , 在 处 理 PG 
图 像 时 ， 要 选择 合适 的 压缩 品质 。 

3) PNG: 可 移植 网 络 图 形 ， 是 专门 针对 Web 开发 的 无 损 压 缩 图 像 ， 支 持 真 色彩 和 透 
明 处 理 。 


4.6.1 插入 图 像 
插入 图 像 的 方法 有 多 种 ， 以 下 介绍 常用 的 两 种 : 
方法 一 :把 光标 放 在 要 插入 图 像 的 位 置 ， 选 择 “ 插 入 ”菜单 一 “图 像 ”命令 。 
方法 二 : 单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “image” 按 钮 。 随 后 弹出 “选择 图 像 源 
文件 ”对 话 框 ， 选 择 图 像 文件 ， 单 击 “ 确 定 ” 按 钮 ， 如 图 4.26 所 示 。 
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访 windows8 os ( 
名 LENOVO (Dj 


名 网络 





| 图像 文 件 (.gif"jpg;*jpeg;*.p Y 

















图 4.26 “选择 图 像 源 文件 ”对 话 杠 


4.6.2 ”设置 图 像 属 性 


选中 图 像 ， 在 “属性 ”面板 中 设置 图 像 的 属性 。 例 如 图 像 的 高 度 、 宽 度 、 周 围 的 空 后 
等 属性 ， 如 图 4.27 所 示 。 








图 隐 , 31k Sre jinaees/luvn jpe ”回国 lsss | 无 : 
ee | 
EE @ 丘 纺 国 太 汪 对 史 EOA 高 W 


























站 原始 | [sl| 


4.27 设置 图 像 属性 





1. 图 像 的 尺寸 
在 “属性 ”面板 中 ， 高 度 和 宽度 文本 框 中 的 数值 显示 了 图 像 的 尺寸 ， 告 诉 浏览 器 应 分 
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配给 图 像 多 大 的 空间 ， 以 像素 为 单位 。 可 直接 输入 数值 来 改变 图 像 的 尺寸 ， 或 选中 图 像 ， 
拖 动 图 像 的 控制 点 来 调整 图 像 大 小 ， 同 时 按 住 Shift 键 ,， 可 成 比例 地 缩放 图 像 的 大 小 。 如 果 
图 像 的 尺寸 不 是 源 图 像 尺寸 ， 数 值 以 加 粗 显示 ， 并 且 出 现 还 原 按钮 公 ， 单 击 此 按钮 可 将 图 
像 还 原 到 原始 尺寸 。 





?注意 : 

一 般 情况 下 ， 建 议 不 要 使 用 指定 高 度 、 宽 度 的 方式 缩放 图 像 ， 而 应 在 图 像 处 理 软件 中 
对 图 像 进行 处 理 ， 然 后 再 插入 到 网 页 中 , 因为 用 指定 尺寸 的 方式 不 能 改变 图 像 所 占 字 节 数 ， 
即 不 能 缩短 图 像 下 载 的 时 间 ， 只 是 改变 了 图 像 显示 的 空间 。 


2. 图 像 的 其 他 属性 


1) 奉 换 : 在 “替换 ”文本 框 中 输入 文本 ， 当 图 像 在 浏览 器 中 不 能 显示 时 ， 则 在 图 像 区 
域 显示 该 文本 ， 如 果 图 像 能 够 正常 显示 ， 则 当 鼠 标 经 过 图 像 时 ， 显 示 该 文本 信息 。 
2) 编辑 : 在 “属性 ”面板 的 “编辑 ”选项 区 域 ， 可 以 单 击 “ 编 辑 ” 按 钮 ， 将 运行 图 像 
编辑 软件 ， 比 如 Fireworks， 对 图 像 文件 进行 编辑 ， 右 侧 还 有 剪裁 、 增 加 亮度 和 对 比 度 、 锐 
3) 链接 和 目标 : 用 于 指定 超 链接 路 径 及 链接 目标 。 
4.6.3 ”制作 翻转 图 像 
翻转 图 像 是 指 当 上 鼠标 经 过 图 像 时 ， 显 示 另 外 一 张 图 像 ， 鼠标 移 开 时 ， 还 原 为 原始 图 像 。 
制作 过 程 如 下 : 首先 准备 尺寸 相同 的 两 幅 图 像 ， 选 择 “ 插 入 ” 栏 一 “常用 ”选项 一 “图 


像 ” 选 项 一 “鼠标 经 过 图 像 ”按钮 ， 或 选择 “插入 ”菜单 一 “图 像 对 象 ”一 “鼠标 经 过 图 
像 ”命令 ， 弹 出 “插入 鼠标 经 过 图 像 ”对 话 框 ， 如 图 4.28 所 示 ， 进 行 如 下 参数 设置 : 








[Inagel 


: [inages/ Tuxun. jpg 


images/hua2. jpg 
预 载 民 标 经 过 图 像 





图 4.28 “插入 鼠标 经 过 图 像 ” 对 话 框 


1) 单 击 “ 原 始 图 像 ”文本 框 右 侧 的 “浏览 ”按钮 ， 在 “原始 图 像 ”对 话 框 中 ， 选 择 作 
为 原始 图 像 的 图 像 文件 。 

2) 单 击 “ 鼠 标 经 过 图 像 ” 右 侧 的 “浏览 ”按钮 ， 在 “翻转 图 像 ” 对 话 框 中， 选择 作为 
鼠标 经 过 图 像 的 图 像 文件 。 

3) 选中 “ 预 载 鼠 标 经 过 图 像 ” 复 选 框 ， 确 保 鼠 标 经 过 图 像 的 图 像 效 果 更 加 平滑 。 
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4) 在 “ 按 下 时 ， 前 往 的 URL” 文 本 框 中 ， 输 入 链接 地 址 。 

5) 最 后 单 击 “ 完 成 ”按钮 ， 当 浏览 网 页 时 ， 鼠 标 经 过 图 像 时 ， 图 像 产 生变 化 。 
4.6.4 ”制作 图 像 映射 

图 像 映射 是 指 在 一 幅 图 像 中 指定 若干 个 区 域 ， 这 些 区 域 被 称 为 热点 ， 每 一 个 区 域 可 链 
接 到 不 同 的 url 地 址 。 图 像 映射 最 常用 于 电子 地 图 、 页 面 导 航 图 、 页 面 导航 条 等 。 操 作 步 
又 如 下 : 

1) 选中 图 像 ， 在 “属性 ”面板 左下 方 ， 选 中 圆 形 “热点 ”工具 ， 如 图 4.29 所 示 。 按 
住 鼠 标 左 键 ， 在 地 图 上 绘制 一 个 圆 形 ， 在 “属性 ”面板 的 “链接 ”文本 框 中 输入 链接 地 址 ， 
如 图 4.30 所 示 。 


图 向 859k re 999454795026092 jps 回国 lass | 无 vv eo | px v ] 普 拒 (7) 村 加 
mm 日 四 坟 国 六 可 对 导 OA 商人 wprv 


地 图 四 目标 () 


pa mm 隔 目 区 


























图 4.30 图 像 映射 


2) 选中 “和 矩形 热点 ”工具 ， 按 住 鼠 标 左 键 ， 在 “长 安 区 ”处 ， 绘 制 一 个 和 矩形， 在 “ 链 
接 ” 文 本 框 处 输入 链接 地 址 。 
3) 同 理 ， 还 可 选中 “多 边 形 热点 ”工具 ， 绘 制 多 边 形 ， 添 加 链接 地 址 。 


4.7 插入 Flash 影片 


Flash 是 一 种 高 质量 、 高 压缩 率 的 矢量 动画 , 有 超 强 的 交互 能 力 , 也 正 是 因为 这 些 原 因 ， 
Flash 在 网 络 上 得 到 了 快速 发 展 。 
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1. 插入 Flash 动画 


插入 到 网 页 中 的 Flash 动画 格式 为 swf，Flash 源 文件 格式 为 Ha， 源 文件 不 能 直接 插入 
到 网 页 中 ， 但 可 以 在 Flash 软件 中 修改 源 文件 。 插 入 Flash 影片 常用 的 方法 有 两 种 : 
方法 一 : 单 击 “ 插 入 ” 栏 一 “媒体 ”选项 一 “Flash SWF ”按钮 ， 如 图 4.31 所 示 。 
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4.31 利用 “插入 ” 栏 插入 SWF 影片 


方法 二 : 选择 “插入 ”菜单 一 “媒体 ”选项 一 “Flash SWF(F)” 命 令 ， 如 图 4.32 所 示 。 
插入 Flash 动画 后 ， 在 “文档 ”窗口 中 出 现 Flash 占 位 符 ， 如 图 4.33 所 示 。 


修改 (M) 模式 (0) 命令 (Q。 站 点 (5 窗口 (W) 帮助 (H) 











DMD) 

HIMLS Video Cel+Al+Shif+y 
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3 Cul+AR#T 
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Hyperink(P) 

电子 部 什 链接 (0 

水 于 线 轧 

BO) 

IFRAME 

nite) » 

结构 (5) » 

内 多 (MD) ») Edee Animate (EB(E) Ctl+Akt+Shit+E 

于 ， HIMLS videow Cel+Alt+ Shiftry 

jQuery UI ， Fash SWFA) CarAlF 
Fash Video 

模板 (L) ;> MP) 

收 项 交 (O) 

最 近 的 代码 片 疡 (R) ， 





图 4.32 利用 “插入 ”菜单 插入 SWF 影片 


indexchtmi x 





EY fobject nodified js 





4.33 Flash 占 位 符 


2. 设置 Flash 影片 的 属性 


单 击 Flash 占 位 符 ， 选 中 Flash， 在 “属性 ”面板 中 设置 它 的 属性 ， 如 图 4.34 所 示 。 
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Flash 各 项 属性 的 功能 如 下 : 

1) FlashID: 定义 Flash 名 称 。 

2) “ 宽 ” 和 “高 ”: 设置 Flash 的 尺寸 。 

3) “文件 ”: Flash 动画 文件 路 径 。 

4) “编辑 ”: Fla 格式 的 源 文件 路 径 ， 单 击 “ 编 辑 ” 按 钮 ， 直 接 进 入 Flash 软件 进行 编 
辑 ， 可 以 不 设置 。 

5) “垂直 边 距 ” 与 “水 平 边 距 ”: 与 周围 网 页 元 素 的 间隔 。 

6) 选中 “循环 ” 复 选 框 ， 影 片 将 连续 播放 ， 否 则 影片 在 播放 一 次 后 自动 停止 。 选 中 
“自动 播放 ” 复 选 框 ， 设 定 Flash 文件 是 否 在 页 面 加 载 时 就 播放 。 

Eee 





Sm 5 。 宽 人 ) 262 文件 四 ashpaper. sf 名 四 俏 录 颜色 (c) 站 Glass 无 v| 
FlashID 高 (0) 400 国 编 太 (2) 

回旋 f(D) 垂直 边 距 (Y) 品质 (9) 高 品质 ~ 对 章 W 默认 值 。 v 

回 自动 播放 (u) 水 平 边 距 (P) 比例 (s) | 歌 认 《全 部 呈 示 | “| 。 Wodeg 趟 透明 。 v | 基数 

















图 4.34 设置 Flash 影片 的 属性 


7) “品质 ”下 拉 列表 : 选择 Flash 动画 的 品质 ， 如 要 以 最 佳 状态 显示 ， 就 选择 “高 

8) “对 齐 ” 下 拉 列 表 : 设置 Flash 动画 的 对 齐 方式 。 

9) 背景 颜色 : 设置 Flash 背景 颜色 与 页 面 背 景 匹配 。 

10) Wmode: 为 了 使 页 面 的 背景 在 Flash 下 面 能 够 衬托 出 来 ， 设 置 参数 去 除 Flash 动画 
背景 。 单 击 “Wmode” 下 拉 列 表 ， 设 置 值 为 “透明 ”。 


4.8 ”插入 Flash 视频 


Flash Video 即 Flash 视频 ， 它 的 后 绥 名 为 ly， 是 目前 广泛 流行 的 一 种 视频 文件 格式 。 
一 般 的 视频 文件 asf、wmv、rmvb 等 都 需要 专门 的 播放 器 来 支持 视频 文件 的 播放 ， 否 则 根 
本 无 法 收看 ， 并 且 这 类 文件 容量 过 大 ， 下 载 慢 ， 查 看 也 不 很 流畅 。 为 了 解决 播放 器 和 容量 
的 问题 ， 可 以 将 各 类 视频 文件 转换 成 Flash 视频 文件 ， 即 flv 格式 ， 经 过 编码 后 的 音频 和 视 
频数 据 ， 通 过 Flash Player 传送 。 操 作 步 又 如 下 : 

单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “媒体 ”选项 一 “Flash Video ”按钮 ， 或 选择 “ 插 
入 ”菜单 一 “媒体 ”选项 一 “Flash Video” 命 令 ， 弹 出 “插入 FLV” 对 话 框 ， 如 图 4.35 所 
示 。 设 置 Flash Video 的 相关 参数 如 下 : 

1) “视频 类 型 ”下 拉 列 表 中 有 两 种 类 型 : “累进 式 下 载 视 频 ” 和 “ 流 视频 ”。 累 进 式 
下 载 视频 是 指 将 Flash 视频 (flv) 文 件 下 载 到 站 点 访问 者 的 硬盘 上 ， 然 后 播放 。 但 是 ， 与 传统 
的 “下 载 并 播放 ”视频 传送 方法 不 同 ， 累 进 式 下 载 允 许 在 下 载 完成 之 前 就 开始 播放 视频 文 
件 。 流 视频 要 求 必须 有 特定 服务 器 的 支持 ， 一 般 选 用 “累进 式 下 载 视频 ”模式 。 
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视频 类 型 : 累进 式 下 载 视频 





URL: music, flv 
《输入 FLV 文件 的 相对 或 绝对 路 径 ) 
外 观 : clear Skin 1 (最 小 亮度 ; 140) 


> 1 em 只 


宽度 : 400 回 限制 高 敲 比 。 | 检 玛 大 小 
高 度 : 300 包括 外 观 : 400x300 

回 自动 播放 

呵 骤 咕 新 生计 





CD。 要 看 视频 ,请 在 章 各 中 预 此 页 面 。 





图 4.35 “插入 FLV” 对 话 框 


2) 在 URL 文本 框 中 ， 输 入 Flash 视频 文件 名 ， 或 单 击 “ 浏 览 ”按钮 ， 查 找 视 频 文件 
路 径 。 

3) 从 “外 观 ” 下 拉 列 表 中 选择 外 观 类 型 。 所 选 外 观 的 预览 会 出 现在 “外 观 ” 下 方 。 

4) 单 击 “ 检 测 大 小 ”以 确定 flv 文件 的 准确 宽度 和 高 度 。 但 是 ， 有 时 Dreamweaver 无 
法 确定 flv 文件 的 尺寸 大 小 。 在 这 种 情况 下 ， 在 “宽度 ”和 “高 度 ” 文 本 框 中 ， 手 动 输入 
数值 。 

5) “自动 播放 ” 复 选 框 : 指定 在 Web 页 面 打 开 时 是 否 播放 视频 。 默 认 情况 下 取消 选 
择 该 选项 。 

6) “自动 重新 播放 ” 复 选 框 : 指定 播放 控件 在 视频 播放 完成 之 后 是 否 返 回 起 始 位 置 继 
续 播放 。 默 认 情 况 下 取消 选择 该 选项 。 

设置 完毕 后 ， 单 击 “ 确 定 ”按钮 。 单 击 Flash Video 占 位 符 ， 将 其 选中 ， 在 “属性 ” 面 
板 中 设置 Flash 视频 的 属性 ， 如 图 4.36 所 示 。 






层 性 

陋 FLv W 400 | 思 限 负 高 痪 比重 置 。 文件 ss 一 
Fiwyer | 500 “| 包括 外 观 :400x300 外 观 cl 1 (最 小 宽度 ; 140) | 
加 自动 播放 
网 自 动 重新 播放 








图 4.36 设置 Flash 视频 的 属性 


小 结 


本 章 主要 介绍 了 网 页 元 素 的 编辑 及 相关 属性 的 设置 ， 包 括 以 下 几 个 方面 : 
1. 网 页 文本 的 编辑 。 
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2. 超 链 接 的 建立 。 
3. 插入 图 像 和 图 像 对 象 。 
4. 插入 Flash 动画 和 Flash 视频 。 


练 习 题 


(1) 一 个 完整 的 URL 地 址 包括 哪些 内 容 ? 超 链 接 中 的 绝对 路 径 和 相对 路 径 有 什么 
区 别 ? 

(2) 要 在 一 幅 图 像 中 创建 多 个 链接 区 域 ， 如 何 实现 ? 

(3) 网 页 中 支持 的 图 像 格式 有 哪些 ? 它们 有 什么 特点 ? 


上 机 实验 


1. 背景 知识 


根据 本 章 所 学 的 文本 编辑 、 插 入 图 像 及 图 像 对 象 、 超 链接 的 设置 等 知识 进行 网 站 的 
创建 。 


2. 实验 准备 工作 
将 文本 素材 和 图 像素 材 准备 好 ， 发 送 到 学 生 主机 上 ， 以 供 学 生 参 考 使 用 。 
3. 实验 要 求 


创建 一 个 以 美食 为 主题 的 网 站 ， 要 求 如 下 : 
(1) 编辑 网 站 首页 ， 效 果 如 图 4.37 所 示 。 


个 图 图 d 


Peeme to he feed nerla 


图 4.37 food 首页 


(2) 编辑 其 他 内 容 网 页 并 添加 超 链 接 ， 其 他 页 面 中 包括 图 像 和 文本 等 。 
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4. 课时 安排 
上 机 实验 安排 2 课时 。 
5. 实验 指导 


1) 网 站 首页 的 制作 过 程 。 

(1) 启动 Dreamweaver， 定 义 本 地 站 点 ， 新 建 一 个 网 页 ， 保 存 为 index.htm。 

(2) 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ,设置 页 边 距 均 为 0， 选择 “标题 / 编码 ” 
选项 卡 ， 设 置 网 页 标题 为 “food”。 

(3) 单 击 “ 插 入 ” 栏 一 “HTML” 选 项 一 “image” 按 钮 ， 插 入 图 像 ndex.jpg， 选 中 图 
像 ， 分 别 单 击 “ 属 性 ”面板 中 的 矩形 “热点 ”工具 ， 在 图 像 上 绘制 矩形 区 域 ， 在 “属性 ” 
面板 的 “链接 ”文本 框 中 输入 链接 地 址 。 

(4) 单 击 插入 栏 一 div 选项 一 插入 div， 在 编辑 界面 添加 文字 ， 字 样 为 “Welcome to the 
food world”， 之 后 在 管理 字体 的 Adobe Edge Web Fonts 中 将 文字 字体 设置 为 alex-brush， 
添加 链接 地 址 ， 完 成 首页 的 制作 。 

2) 制作 内 容 页 面 ， 如 图 4.38 所 示 。 
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图 4.38 food 内 容 页 面 


(1) LOGO 采用 鼠标 经 过 图 像 ， 添 加 链接 到 首页 的 地 址 ， 采 用 插入 多 个 鼠标 经 过 图 像 ， 
制作 导航 条 。 

(2) 利用 图 像 背 景 美化 网 页 。 

(3) 添加 Flash 动画 。 

(4) 添加 网 页 之 间 的 超 链 接 。 
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CSS(Cascading Style Sheets), 中 文 译 为 层 匡 样式 表 , 用 于 定义 HTML 元 素 的 显示 形式 ， 
是 W3C 推出 的 格式 化 网 页 内 容 的 标准 技术 ， 是 用 于 控制 网 页 样式 并 允许 样式 信息 与 网 页 
内 容 分 离 的 一 种 标记 性 语言 。 

本 章 主要 介绍 CSS 样式 表 的 功能 与 应 用 ， 重 点 介绍 利用 CSS+DIV 进行 网 页 布 
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【本 章 学 习 目标 】 
通过 本 章 学 习 ， 读 者 能 够 : 
e。 了 解 CSS 样式 表 的 功能 与 用 途 
。 掌握 定义 CSS 规则 的 方法 
e 掌握 利用 CSS 样式 表 进行 网 页 美化 的 技巧 
e 重点 掌握 利用 CSS+DIV 进行 网 页 布局 


5.1 实例 导 和 人 : 采用 CSS 样式 表 的 网 页 


CSS 样式 表 是 由 一 系列 样式 选择 器 和 CSS 属性 组 成 的 , 支持 文本 属性 、 颜 色 和 背景 属 
性 、 边 框 属性 、 列 表 属 性 以 及 精确 定位 网 页 元 素 属性 等 ， 增 强 了 网 页 的 格式 化 功能 。 

使 用 CSS 样式 表 的 另 一 个 优点 是 可 以 利用 同一 个 样式 表 对 整个 站 点 的 具有 相同 性 质 
的 网 页 元 素 进行 格式 修饰 ， 当 需要 更 改 样式 设置 时 ， 只 需要 在 这 个 样式 表 中 修改 ， 而 不 用 
对 每 个 页 面 逐个 进行 修改 ， 简 化 了 格式 化 网 页 的 工作 。 

【 例 5.1】 HTML 标签 的 简单 应 用 ,在 网 页 中 若 使 每 个 段落 的 文字 用 深 灰 色 显示 ， 那 
么 HTML 源 代码 就 要 写成 : 

<p><font color="#999999"> 段 落 1</font></p> 

<p><font color="#999999"> 段 落 2</font></p> 


如 果 想 把 段落 字体 改 为 红色 ， 则 必须 对 每 段 文字 颜色 的 代码 进行 修改 ， 这 非常 麻烦 。 
而 CSS 样式 表 是 怎么 解决 这 个 问题 的 呢 ? 
【 例 5.2】 CSS 样式 表 的 简单 应 用 ， 只 需 在 <head> 和 </head> 之 间 添 加 如 下 CSS 代码 : 


<style type=text/css> 
一 !-- 


Color:#999999; 
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-> 
</style> 


所 有 段落 文字 处 不 用 设置 任何 字体 颜色 即 呈 现 为 深 灰 色 ， 如 果 要 改 成 红色 ， 只 需 将 上 
述 代码 中 的 颜色 修改 为 color: 考 F0000 即 可 。 

在 Dreamweaver 中 网 页 是 基于 CSS 进行 构造 的 。 从 下 面 的 页 面 属性 和 文本 样式 的 设置 
可 以 说 明 这 一 点 : 

【 例 5.3】 页 面 属性 的 设置 。 

新 建 一 个 页 面 ， 然 后 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ， 弹 出 “页 面 属性 ”对 
话 框 ， 如 图 5.1 所 示 ， 在 此 做 如 下 设置 : 

1) “外 观 ” 选 项 卡 : 设置 字体 “大 小 ”为 12 像素 、“ 背 景 图 像 ” 为 images/bg.gif、 
“重复 ”为 no-repeat、 页 边 距 均 为 0。 

2) “链接 ”选项 卡 : 设置 文本 链接 特效 ， 设 置 “ 链 接 颜 色 ” 为 深 灰 色 (#999)、“ 变 换 
图 像 链 接 ”( 即 鼠标 经 过 时 的 颜色 ) 为 红色 ( 手 00)、“ 已 访问 链接 ”为 深 灰 色 (加 99)、“ 下 划 
线 样式 ”为 仅 在 变换 图 像 时 显示 下 划 线 。 

这 些 设 置 会 自动 生成 CSS 代码 ， 在 <head> 和 </head> 中 出 现 ，CSS 样式 会 自动 应 用 于 
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图 5.1 在 “页 面 属性 ”对 话 框 中 设置 CSS 样式 
【 例 5.4】 文本 样式 的 设置 。 


选中 文本 时 ， 在 “属性 ”面板 中 进行 文本 的 设置 ， 如 设置 字体 “大 小 ”为 16 像素 、 
颜色 为 #fc0， 如 图 5.2 所 示 。 
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图 5.2 设置 文本 样式 
【 例 5.5】 利用 CSS 样式 还 可 以 代替 表格 进行 网 页 布局 , 这 是 目前 较为 流行 的 页 面 排 
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版 方式 ， 如 图 5.3 所 示 。 


该 实例 主要 采用 了 DIV 标签 十 CSS 样式 ， 主 要 涉及 以 下 几 个 知识 点 : 


1) 分 析 构架 : 画 出 构架 图 。 

2) 模块 拆 分 : 分 别 定义 特定 ID 的 DIV 标签 的 CSS 样式 。 
3) 在 网 页 中 插入 DIV 标签 ， 在 DIV 中 插入 网 页 元 素 。 
4) 总 体 调整 : 色彩 及 内 容 的 调整 ， 适 当 修改 CSS 样式 。 
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图 5.3 利用 DIV 十 CSS 进行 网 页 布局 


5.2 ”了解 CSS 样式 表 


5.2.1 CSS 样式 表 概 述 


1. CSS 样式 表 的 使 用 
CSS 样式 表 的 常用 方法 有 以 下 两 种 : 


方法 一 : 页 面 内 帐 法。 将 样式 表 代码 直接 写 在 HTML 标签 的 <head> 和 </head> 之 间 ， 


如 例 5.2。 


方法 二 : 外 部 链接 法 。 将 样式 表 写 在 一 个 独立 的 后 级 名 为 css 的 文件 中 ， 在 需要 应 用 
CSS 样式 的 网 页 中 链接 该 文件 ， 在 页 面 的 <head> 和 </head> 之 间 用 以 下 代码 调用 : 





<link href—"css/style.css" rel="stylesheet" type="text/css" /> 
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在 符合 Web 标准 的 设计 中 ,使 用 外 部 链接 法 的 好 处 不 言 而 喻 , 用 户 不 修改 页 面 ， 只 修 
改 CSS 文件 就 可 改变 页 面 的 样式 。 如 果 所 有 页 面 都 调用 同一 个 样式 表 文件 ， 那么 修改 一 个 
样式 表 文 件 ， 就 能 改变 所 有 文件 的 样式 。 

2. CSS 样式 表 语 法 

选择 符 { 属 性 1: 值 1; 属性 2: 值 2; …… } 

参数 说 明 : 
属性 和 属性 值 之 间 用 冒号 () 隔 开 ， 定 义 多 个 属性 时 ， 属 性 之 间 用 分 号 (; ) 隔 开 。 








5.2.2 在 Dreamweaver 中 定义 CSS 


1. 创建 CSS 样式 


选择 “窗口 ”菜单 一 “CSS 设计 器 ”命令 ， 打 开 “CSS 设计 器 ”面板 ， 单 击 左 上 角 的 
“ 源 ” 按 钮 贞 ， 如 图 5.4 所 示 。 


























图 5.4 “CSS 设计 器 ”对 话 框 

2. CSS 规则 定义 的 位 置 

定义 的 位 置 有 以 下 三 种 情况 : 

1) 选择 “在 页 面 中 定义 ”， 此 时 CSS 样式 的 代码 会 嵌 套 在 网 页 的 <head> 和 </head> 标 
签 之 间 。 

2) 选择 “创建 新 的 CSS 文件 ”， 则 弹出 “创建 新 的 CSS 文件 ”对 话 框 ， 如 图 5.5 所 
示 。 选 择 样 式 文件 的 存储 路 径 和 文件 名 ， 单 击 “ 保 存 ” 按 钮 ， 将 CSS 样式 代码 单独 存放 在 
一 个 CSS 文件 中 ， 此 处 创建 的 新 的 CSS 文件 为 style.css。 
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图 5.5 保存 样式 表 文 件 


3) 选择 “附加 现 有 的 CSS 文件 ”， 将 新 建 的 CSS 规则 写 入 已 有 的 CSS 文件 中 。 

例如 ， 在 文档 中 输入 一 段 文本 ， 并 将 此 段 文本 选中 ， 在 属性 面板 中 选择 “HTML” 选 
项 ， 单 击 “ 格 式 ” 下 拉 框 ， 选 择 “ 标 题 1”， 如 图 5.6(a) 所 示 。 在 “CSS” 设 计 器 中 ， 选 择 
“ 源 ”， 选择“style.css”， 单 击 “@ 媒 体 ”， 选 择 “ 全 局 ”， 单 击 “ 选 择 器 ， 选 择 “body h1” 
后 ， 显 示 “body hl 的 CSS 规则 定义 ”对 话 框 ， 如 图 5.6(b) 所 示 。 在 该 对 话 框 中 进行 CSS 
样式 的 布局 、 文 本 、 边 框 、 背 景 及 其 他 等 各 项 设置 。 
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(b) “body hl 的 CSS 规则 定义 ”对 话 框 
图 5.6 附加 已 有 的 CSS 文件 

















3. 编辑 和 删除 CSS 样式 


创建 CSS 样式 后 ， 如 果 要 修改 CSS 样式 ， 直 接 在 “CSS 设计 器 ”面板 中 修改 ; 或 者 
在 “属性 ”面板 中 ， 选 择 “CSS” 选 项 ， 确 定 “ 目 标 规则 ”， 单 击 “ 编 辑 规则 ”进入 “CSS 
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规则 定义 面板 ”进行 修改 ， 如 图 5.7 所 示 。 
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图 5.7 修改 CSS 样 式 


某 个 CSS 样式 不 再 需要 时 ， 在 “CSS 设计 器 ”面板 中 ， 首 先 选中 某 个 样式 ， 单 击 CSS 
设计 器 左上 角 的 “删除 ”按钮 另 即 可 。 


5.3 ”利用 CSS 美化 网 页 


【 例 5.6】 应 用 CSS 样式 设计 图 文 混 排 效果 ， 如 图 5.8 所 示 。 
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5.8 应 用 CSS 样式 设计 图 文 混 排 效果 


此 实例 涉及 的 知识 点 是 CSS 样式 的 创建 和 应 用 ， 有 以 下 几 点 : 
1) 背景 样式 、 文 本 及 列表 样式 、 方 框 与 边框 样式 、 动 态 链接 样式 。 
2) 建立 单独 的 CSS 文件 ， 应 用 于 多 个 网 页 。 
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5.3.1 背景 样式 的 应 用 


在 例 5.6 中 ， 上 方 浅 绿色 的 横 条 其 实 是 重新 定义 了 body 标签 的 网 页 背景 图 像 ， 背 景 图 
像 横向 重复 ， 对 网 页 元 素 与 页 边 距 也 进行 了 设置 ， 操 作 步 骤 如 下 : 

1) 单 击 “ 窗 口 ”菜单 一 “CSS 设计 器 ”命令 ， 打 开 “CSS 设计 器 ”面板 。 单 击 左上 角 
的 “ 源 ” 按 钮 更， 创建 新 的 CSS 文件 ， 单 击 “@ 媒 体 ”， 选 择 “ 全 局 ”; 单 击 “ 选 择 器 ， 
选择 “body” 后 ， 显 示 “body 的 CSS 规则 定义 ”对 话 框 。 单 击 “ 背 景 ”选项 卡 ， 设 置 背 
景 图 像 为 mages/bg.gif， 单 击 “background-repeat” 下 拉 列 表 ， 选 择 “横向 重复 ”命令 ， 如 图 
5.9 所 示 。 








ES 有 
+ 有 

中 园 口 日 口 
加 于 


backgroundcolor : [ 罗 mderne 














口 5 和 集 


background-image 


url images/bg.gif 
gradient 


background-ongn 

















图 5.9 “body 的 CSS 规则 定义 ”对 话 框 中 的 “背景 ”选项 卡 


2) 设置 页 边 距 。 在 “属性 ”面板 中 ， 选 择 “CSS” 选 项 ， 确 定 “ 目 标 规 则 ”， 单 击 “ 编 
辑 规 则 ”， 选 择 “body”， 进 入 “body 的 CSS 规则 定义 面板 ”。 将 填充 设置 为 “全 部 相 
同 ”， 值 为 0， 边界 分 别 设置 上 下 均 为 50 像素 、 左 右 均 为 100 像素 ， 如 图 5.10 所 示 。 
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“body 的 CSS 规则 定义 ” 
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对 话 框 中 的 “ 方 框 ”选项 卡 


。66。 网 站 规划 与 网 页 设计 (第 二 版 ) 


5.3.2 文本 及 列表 的 应 用 


在 例 5.6 中 ， 为 文本 和 列表 都 应 用 了 CSS 样式 ， 分 别 设置 字体 、 段 落 、 列 表 的 相关 属 
性 。 第 一 行文 本 是 标题 (标签 为 hl)， 第 二 行文 本 是 标题 2( 标 签 为 h2) ， 正 文部 分 用 了 列 
表 ( 标 签 为 UL)。 


1. 字体 的 样式 设置 

在 “CSS 设计 器 ”对 话 框 的 “文本 ”选项 卡 中 ， 设 置 文本 的 字体 、 字 体 大 小 、 字 体 颜 
色 、 字 体 修饰 、 字 体 的 粗细 及 行 高 等 。 

2. 文本 段落 的 样式 设置 

在 “CSS 设计 器 ”对 话 框 的 “文本 ”选项 卡 中 ， 如 图 5.11 所 示 ， 设 置 以 下 参数 : 
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图 5.11 “hl 的 CSS 规则 定义 ”对 话 框 中 的 “区 块 ” 选 项 卡 

1) 单词 间距 (word-spacing): 用 于 设置 单词 之 间 的 距离 ,距离 的 单位 有 很 多 种 ， 一 般 用 
像素 来 设置 。 

2) 字母 间距 (letter-spacing): 用 于 设置 字母 、 字 符 之 间 的 距离 。 

3) 垂直 对 齐 (vertical-align): 指定 对 和 象 的 纵向 对 齐 方式 ， 比 如 可 以 设置 文本 的 上 标 和 下 
标 等 。 如 果 输 入 一 个 具体 的 数值 ， 则 后 面 的 下 拉 菜 单 框 中 显示 为 百 分 号 ， 表 示 这 个 值 是 相 
对 值 。 

4) 文本 对 齐 (text-align): 文本 对 齐 方式 。 

5) 文本 缩 进 (text-indenD: 指定 首 行 缩 进 的 数值 。 

3. 标题 的 设置 


操作 步骤 如 下 : 

1) 重新 定义 标题 1。 在 “CSS 设计 器 ”中 ， 单 击 “ 源 ”， 选 择 “stylecss”， 单 击 “@ 
媒体 ”， 选 择 “ 全 局 ”， 单 击 “ 选 择 器 ， 选 择 “h1” 后 ， 显 示 “hl 的 CSS 规则 定义 ”对 
话 框 。 在 “文本 ”选项 卡 中 ， 定 义 字体 大 小 为 34 像素 ， 粗 细 为 特 粗 ， 行 高 为 35 像素 ， 颜 
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色 为 紫色 (#33C)， 选 择 文本 对 齐 为 居中 ， 字 母 间 距 为 10 像素 。 

2) 重新 定义 标题 2。 方 法 与 步骤 D) 相同 ， 单 击 “文本 ”选项 卡 ， 设 置 字体 大 小 为 18 
像素 ， 粗 细 为 粗 体 ， 行 高 为 25 像素 ， 颜 色 为 绿色 (#218B84) ， 设 置 文本 对 齐 为 居中 。 

4. 列表 的 样式 设置 


1) 类 型 : 设置 项 目 符号 或 编号 的 外 观 。 

2) 项 目 符号 图 像 : 指定 图 像 用 于 替代 项 目 符号 的 样式 ， 美 化 项 目 符号 。 

重新 定义 项 目 列表 (标签 为 UL)。 方 法 与 标题 设置 时 的 步骤 1) 相同 。 在 弹出 的 “UL 的 
CSS 规 则 定义 ”对 话 框 中 ， 在 “文本 ”选项 卡 中 ， 设 置 字体 大 小 为 4 像素， 字体 颜色 为 深 
灰色 (#666)， 行 高 为 40px， 如 图 5.12 所 示 。 在 项 目 符号 图 像 中 输入 URL 地 址 images/li.gif。 
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图 5.12 “ul 的 CSS 规则 定义 ”对 话 框 


5.3.3” 方 框 和 边框 样式 的 应 用 


在 例 5.6 中 ， 插 入 一 幅 图 像 ， 通 过 CSS 样式 的 应 用 ， 实 现 了 图 文 混 排 的 效果 。 在 该 实 
例 中 主要 设置 了 方 框 的 浮动 和 边界 及 填充 的 距离 ， 实 现 了 图 像 与 文本 之 间 的 环绕 ， 还 设置 
了 边框 , 添加 了 一 个 虚线 边框 来 修饰 图 像 。 这 里 首先 定义 了 一 个 类 的 CSS 规则 ， 然 后 将 此 
类 应 用 于 某 个 图 像 上 。 

1. 图 像 边 距 的 设置 


在 “CSS 规则 定义 ”对 话 框 的 “布局 ”选项 卡 中 ， 主 要 包括 以 下 选项 : 
e ”高度 (height) 和 宽度 (width): 方 框 的 尺寸 。 

e 浮动 (float): 设置 网 页 元 素 浮 于 页 面 左边 距 或 右边 距 。 

。 填充 (padding 分 为 上 下 左右 ): 网 页 元 素 到 边框 的 距离 。 

e 边界 (margin 分 为 上 下 左右 ): 网 页 元 素 边缘 与 周围 元 素 之 间 的 距离 。 
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2. 图 像 边框 的 设置 

在 “CSS 设计 器 ”对 话 框 的 “边框 ”选项 卡 中 ， 主 要 包括 边框 样式 、 宽 度 和 颜色 等 。 
其 操作 步骤 如 下 : 

1) 单 击 “ 选 择 器 ”按钮 ， 添 加 选择 器 ， 在 文本 框 中 输入 imgl 。 

2) 方 框 的 设置 。 在 “CSS 规则 定义 ”对 话 框 中 ， 单 击 “ 布 局 ”选项 卡 ， 进 行 如 图 5.13 
所 示 的 设置 。 浮 动 (float): 右 对 齐 (right)。 填 充 (padding): 全 部 相同 输入 一 个 具体 数值 10 
像素 。 边 界 (margin): 全 部 相同 ， 输 入 一 个 具体 数值 10 像素 。 
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图 5.13 “布局 ”选项 卡 的 设置 


3) 边框 的 设置 。 单 击 “ 边 框 ” 选 项 卡 , 在 所 有 边 的 样式 (style) 下 拉 列 表 中 选择 “(dotted)” 
虚线 ， 设 置 宽度 (width) 为 2 像素 、 颜 色 为 紫色 (#30F)， 如 图 5.14 所 示 。 








匡 到 医 T 双 | 
+- 源 + = Mt 
所 有 源 是 团 口中 日 口 器 i 集 
i 
border : 2px dotted #30F 
[= = 
width 2 px 
style dotted 
color | :3or 











十 
PD Nt css A 
可 














图 5.14 “边框 ”选项 卡 的 设置 
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4) 类 的 应 用 。 将 自 定义 的 CSS 规则 应 用 于 网 页 元 素 。 
在 代码 视图 中 找到 对 应 的 图 像 标签 ， 在 标签 中 编写 class="img1"， 代 码 如 下 所 示 : 





<img src="images/yangtu.jpg" name="imgl" width="300" height="259" class="imgl"> 


5.3.4 动态 链接 样式 的 应 用 


简单 的 CSS 链接 样式 可 以 在 页 面 属 性 中 的 “链接 ”选项 卡 中 设置 ，5.1 节 中 已 经 讲 过 。 

在 例 5.6 中 ， 建 立 较为 复杂 的 CSS 链接 样式 ， 当 鼠标 经 过 链接 文字 时 ， 文 字 颜 色 会 变 
色 、 字 体 样式 变 粗 、 出 现 背 景 颜色 、 文 字 修饰 有 下 划 线 等 。 这 里 讲解 两 个 重要 的 知识 点 : 
如 何 建立 CSS 链接 样式 和 如 何 调用 外 部 CSS 样式 表 。 


1. 建立 链接 CSS 样式 


1) 打开 “CSS 设计 器 ”面板 ， 单 击 “ 源 ”， 选 择 “stylecss”， 单 击 “@ 媒 体 ”， 选 
择 “ 全 局 ”， 单 击 “ 选 择 器 ”， 添 加 a:link( 链 接 后 效果 )， 定 义 字体 颜 色 为 紫色 (#309)、 字 
体 修饰 为 “无 ”， 如 图 5.15 所 示 。 
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图 5.15 设置 链接 的 CSS 样式 


2) 打开 “CSS 设计 器 ”面板 ， 选 中 a:link， 单 击 鼠 标 右 键 ， 在 弹出 菜单 中 选择 复制 命 
令 ， 如 图 5.16 所 示 。 弹 出 “复制 样式 ”对 话 框 ， 如 图 5.17 所 示 ， 新 建 一 个 avisited( 访 问 后 
效果 )， 样 式 不 做 任何 修改 ， 直 接 粘 贴 样式 ， 链 接 后 与 访问 后 效果 一 致 。 

3) 打开 “CSS 设计 器 ”面板 ， 单 击 “ 源 ”， 选 择 “style.css”， 单 击 “@ 媒 体 ”， 选 
择 “ 全 局 ”， 单 击 “ 选 择 器 ”， 添 加 ahover( 鼠 标 经 过 效果 )。 

4) 在 “文本 ”选项 卡 中 ， 设 定 颜色 为 “橙色 ”， 修 饰 选中 “下 划 线 ”， 在 “粗细 ”下 
拉 列 表 中 选择 “ 粗 体 ”。 
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复制 布局 样式 








复制 文本 样式 转 至 代码 

复制 边框 样 式 _imgl | 复制 所 有 样式 
大 小 (5S) 14 复制 背景 样式 

复制 动画 /这 渡 样式 









复制 其 他 样式 


图 5.16 复制 CSS 样式 图 5.17 打开 “复制 样式 ”对 话 框 


2. 调用 CSS 样式 文件 


若 想 在 其 他 网 页 上 应 用 刚才 建立 的 CSS 样式 文件 , 应 如 何 调用 呢 ? 单 击 “CSS 设计 器 ” 
面板 中 的 “ 源 ” 按 钮 更， 选择 “附加 现 有 的 CSS 文件 ”， 弹 出 “使 用 现 有 的 CSS 文件 ”对 
话 框 。 在 “文件 /URL” 文 本 框 中 输入 外 部 CSS 文件 的 路 径 和 文件 名 ， 为 “添加 为 ”选择 
“链接 ”， 将 新 建 的 样式 文件 链接 到 此 网 页 ， 如 图 5.18 所 示 。 
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图 5.18 链接 外 部 样式 表 


5.3.5” 渡 镜 效果 的 应 用 


CSS 滤 镜 并 不 是 浏览 器 的 插件 ,也 不 符合 CSS 标准 , 而 是 微软 公司 为 增强 浏览 器 功能 
而 特意 开发 并 整合 在 正 浏览 器 中 的 一 类 功能 集合 。 由 于 正 浏览 器 有 着 广泛 的 使 用 范围 ， 





























因此 CSS 滤 镜 也 被 广大 设计 者 所 喜爱 。 
CSS 滤 镜 可 以 为 样式 控制 的 对 象 指定 特殊 效果 ， 见 表 5.1。 
表 5.1 滤 镜 效果 

名 称 功能 功能 
Alpha 透明 效果 模糊 效果 
Chroma 将 指定 的 颜色 设置 成 透明 投影 效果 
FlipH 进行 水 平 翻转 进行 垂直 翻转 
Glow 发 光 效 果 产生 灰 阶 
Invert 反 转 底片 效果 灯光 投影 
Mask 遮 单 阴影 效果 
Wave 水 平 与 生 直 波动 效果 设置 又 光 效 果 
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CSS 滤 镜 只 能 作用 于 有 区 域 限制 的 对 象 ， 如 表格 、 单 元 格 、 图 片 等 ， 而 不 能 直接 作用 
于 文字 ， 所 以 ， 需 要 增加 特效 的 文本 必须 事先 放 在 单元 格 或 层 中 ， 然 后 对 单元 格 或 层 应 用 
CSS 样式 。 

【 例 5.7】 设置 图 像 的 半 透 明 效果 ， 操 作 步 又 如 下 : 

1) 新 建 一 个 网 页 ， 网 页 背景 颜色 为 黑色 ， 插 入 两 幅 完 全 相同 的 图 像 。 

2) 切换 到 源 代码 视图 ， 在 照片 标签 里 分 别 加 入 class="img1"， 代 码 如 下 所 示 : 





<img class="imgl" src="images/imgl.jpg" width="354" height="179"> 
3) 切换 到 CSS 样式 表 的 代码 视图 ， 输 入 : 


imgl { 
opacity:0.4; ~ filter:alpha(opacity=40) ; 
H 


4) 按 下 F12 键 ， 浏 览 网 页 效果 ， 如 图 5.19 所 示 。 


© cr 


图 5.19 alpha 滤 镜 效果 图 


CSS 滤 镜 样式 非常 多 ， 可 以 在 不 使 用 大 型 图 形制 作 软件 的 基础 上 制作 出 绚丽 的 特效 。 
由 于 篇 幅 有 限 ， 这 里 就 不 一 一 介绍 了 。 


5.4 利用 CSS+DIV 进行 网 页 布局 


CSS+DIV 是 网 站 标准 (或 称 “Web 标准 ”) 中 的 常用 术语 之 一 ， 是 一 种 网 页 布局 方法 ， 
这 种 网 页 布局 方法 有 别 于 传统 的 HTML 网 页 设计 语言 中 的 表格 (table) 定 位 方式 ， 可 实现 页 
面 内 容 与 表现 相 分 离 。 

利用 CSS 样式 还 可 以 代替 表格 进行 网 页 布局 ， 本 节 讲 解 如 何 利用 DIV 标签 和 CSS 样 
式 进行 网 页 的 排版 ， 制 作 过 程 如 下 。 


1. 分 析 架 构 
网 页 布局 如 图 5.20 所 示 。 
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container 





图 5.20 ”网 页 布局 图 


2. 模块 拆 分 


一 个 总 的 DIV 标签 ， 它 包含 了 4 个 DIV 标签 : 

1) container: 最 大 的 容器 ， 将 所 有 内 容 包含 在 内 。Width: 950px。 

2) header: 网 站 头 部 图 标 ， 包 含 一 幅 家 具 图 像 和 Flash 动画 。Width: 950px。Height: 
260px。 

3) leftnav: 左 侧 导航 条 。Width: 200px， 浮 动 为 左 对 齐 。 

4) content: 网 站 的 主要 内 容 。 左 侧 边界 为 200px。 

5) footer: 网 站 底 栏 ， 包 含 版 权 信 息 等 。 设 置 “ 清 除 (clear)” 为 “两 者 (both)”。 


3. 定义 DIV 标签 的 CSS 样式 


定义 页 面 属性 和 特定 ID 的 DIV 标签 的 CSS 样式 。 

首先 创建 本 地 站 点 ， 站 点 中 包括 两 个 子 文件 夹 images 和 css， 分 别 用 于 存储 图 像素 材 
和 CSS 样式 文件 。 

1) 定义 页 面 属性 。 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ， 弹 出 “页 面 属性 ”对 话 
框 ， 设 置 背景 图 片 为 images/beiijngjpg、 字 体 大 小 为 14 像素 、 页 边 距 均 为 0， 定义 网 页 标 
题 为 “ 峻 漫 小 社 ”。 

2) 定义 “#containter” 的 CSS 样式 。 在 “属性 ”面板 中 ， 单 击 “CSS Designer” 按 钮 ， 
在 弹出 的 “CSS 设计 器 ”对 话 框 中 ， 创 建 一 个 CSS 文件 ， 命 名 为 “style”， 保 存在 css 文 
件 夹 中 ， 如 图 5.21 所 示 ， 在 “选择 器 ”文本 框 中 输入 “#container”。 弹 出 “#container 的 
CSS 规则 定义 ” 对话 框 ， 单 击 “ 布 局 ”选项 卡 ， 输 入 宽度 (width) 为 950 像素 ,填充 (padding) 
上 、 下 、 左 、 右 均 为 0，margin 上 、 下 均 为 0， 左 、 右 为 自动 (auto)。 

3) 定义 “#beader” 的 CSS 样式 。 与 步骤 2) 相同 ,在 “选择 器 ”文本 框 中 输入 #header。 
弹出 “加 eader 的 CSS 规则 定义 ”对 话 框 ， 单 击 “ 布 局 ”选项 卡 ， 输 入 宽度 (width) 为 950 像 
素 , 高 度 为 110 像 素 , 填充 均 为 0, 边界 均 为 0; 单 击 “ 背 景 "选项 卡 ,背景 图 像 (background-image) 
为 “images/top.jpg”。 
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TE 
图 5.21 “CSS 设计 器 ”对 话 框 

4) 定义 “ 夫 eftnav” 的 CSS 样式 。 与 步骤 2) 相同 , 在 “选择 器 ”文本 框 中 输入 圾 eftnav， 
在 “ 夫 eftmav 的 CSS 规则 定义 ” 对话 框 中 , 单 击 “ 背 景 ” 选 项 卡 , 设置 背景 (background-color) 
为 (#9C6);， 单 击 “ 布 局 ”选项 卡 ， 设 置 宽度 (width) 为 200 像素 、 浮 动 (float) 为 左 对 齐 (left)、 
边界 (margin) 和 填充 (padding) 均 为 0。 

5) 定义 “#content” 的 CSS 样 式 , 与 步骤 2) 相同 ,在 “选择 器 "文本 框 中 输入 “#content”， 
在 “#content 的 CSS 规则 定义 ”对 话 框 中 , 单 击 * 背 景 选 项 卡 , 设置 背景 (background-color) 
为 青绿 色 (#cF9); 单 击 “ 布 局 ”选项 卡 ， 填 充 (padding) 不 设置 ， 设 置 边 界 (margin) 一 一 左 为 
200 像素 ， 其 余 均 为 0。 

6) 定义 “#footer” 的 CSS 样式 。 与 步骤 2) 相同 , 在 “选择 器 ”文本 框 中 输入 “#footer”， 
在 “#footer 的 CSS 规则 定义 ”对 话 框 中 ， 单 击 “ 文 本 ”选项 卡 ， 设 置 字体 大 小 (font-size) 
为 12 像素 、 行 高 (line-height) 为 20 像素 、 颜 色 (colonD 为 白色 :; 单 击 “ 背 景 ”选项 卡 ， 设 置 
背景 为 绿色 (#9C9) ; 单 击 “ 布 局 ”选项 卡 ， 将 “清除 (clear)” 设 置 为 “两 者 (both)”( 设 置 
both 是 为 了 消除 前 面 设置 浮动 左 对 齐 的 影响 )。 


4. 在 网 页 中 添加 DIV 标签 


1) 单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “DIV” 按 钮 轿 ， 弹 出 “插入 DIV” 对 话 框 ， 如 
图 5.22 所 示 ， 在 ID 下 拉 列 表 中 选择 container， 单 击 “ 确 定 ” 按 钮 。 























图 5.22 “插入 DIV” 对 话 框 


。7T4。 网 站 规划 与 网 页 设计 (第 二 版 ) 








2) 用 光标 单 击 container 容器 内 , 与 步骤 1) 相同 , 单 击 “DIV” 按 钮 , 弹出 “插入 DIV” 
对 话 框 ， 在 “ID” 下 拉 菜 单 中 选择 header， 单 击 “ 确 定 ”按钮 。 
3) 与 步骤 1) 相同 ， 依 次 插入 leftnav、content、footer 的 DIV 标签 ， 如 图 5.23 所 示 。 














此 名 旺 示 4 “frotee” 的 内 容 


图 5.23 插入 指定 了 的 DIV 标签 


Y 注 意 : 

最 外 层 DIV 的 ID 为 container, 其 他 的 DIV 标签 均 包 含 在 containter 中 , 除了 container 
外 ， 其 他 都 是 并 列 关系 ， 顺 序 为 header、leftnav、content、footer。 操 作 方 法 是 首先 插入 
containter， 然 后 切换 到 代码 视图 ， 将 光标 放 在 <div id="container">...</div> 之 间 ， 然 后 单 击 
“插入 DIV 标签 ”按钮 ， 分 别 插入 其 他 的 DIV 标签 。 


5. 在 DIV 中 填充 网 页 内 容 


1) 单 击 header 区 域 , 插入 Flash 动画 ash2773.swf，Flash 文件 是 矢量 图 形 ， 可 改变 其 
尺寸 而 不 影响 动画 的 浏览 效果 。 

2) 单 击 leftnav 区 域 ， 插 入 图 像 images/logo.png， 输 入 文字 内 容 。 

3) 单 击 “content” 区 域 ， 输 入 文字 内 容 ， 插 入 图 片 并 设置 图 片 向 右 浮动 。 

4) 单 击 “footer” 内 ， 输 入 版 权 所 有 信息 和 联系 方式 信息 。 

保存 网 页 ， 按 下 F12 键 浏览 网 页 效果 。 


小 结 





本 章 主要 介绍 了 CSS 样式 表 的 创建 与 应 用 ， 通 过 CSS 样式 的 使 用 ， 使 得 网 页 样式 更 
加 丰富 多 彩 。 

1) CSS 的 概念 : CSS 样式 、 样 式 的 分 类 、CSS 的 语法 结构 等 。 

2) CSS 样式 的 创建 。 

3) CSS 样式 的 应 用 。 
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练 习 题 
1. 什么 是 CSS 样式 表 ? 分 为 哪 几 类 ? 


2. 定义 CSS 样式 表 有 什么 好 处 ? 
3. 如 何 调用 外 部 CSS 样式 表 文 件 ? 














上 机 实验 


1. 背景 知识 


根据 本 章 所 学 的 CSS+DIV 网 页 布局 技术 ， 再 综合 前 面 所 学 的 创建 站 点 及 编辑 网 页 的 
知识 ， 制 作 精美 的 网 页 及 应 用 CSS 扩展 功能 。 


2. 实验 准备 工作 

实验 素材 、 网 页 元 素 及 网 页 样 图 ， 发 送 到 学 生 的 主机 ， 以 供 学 生 参 考 使 用 。 
3. 实验 要 求 

(1) 利用 CSS 样式 表 制 作 精美 的 网 页 ， 如 图 5.24 所 示 。 





彩云 之 根 
李 贯 通 


这 里 , 我 读 到 了 中 国 哲 学 的 精 储 一 天 人 合 一 , 读 到 了 人 世间 最 完善 的 
和 谐 。 

跑 上 和 I 的 土地 , 只 见 四 围 青山 如 绒 , 纱 样 的 雾 悠游 流 盼 。 萤 们 
监 们 忙碌 于 更 高 处 的 云 和 更 低 处 的 水 , 成 了 天 与 地 的 信使 。 山 脚下 
的 人 家 , 在 一 访谈 的 凤 尾 竹 间 时 隐 时 现 ; 听 不 清 词 的 一 二 句 歌声 响 
起 ,点 燃 了 三 五 家 的 炊烟 。 眼 前 是 自 绿 的 稻田 , 时 有 晨 声 起 优 , 也 时 
有 水 牛 走动 ; 与 稻田 相 邻 的 是 荷塘 , 荷 葡 述 楚 , 荷 叶 田 田 , 细心 看 过 
了 , 好 一 个 “ 鱼 戏 莲 叶 东 , 鱼 戏 莲 叶 西 , 鱼 戏 莲 叶 南 , 鱼 戏 莲 叶 北 ”。 
游客 正 沉醉 , 忽然 一 个 久违 的 、 让 人 心头 一 热 的 形象 控 肩 而 过 , 拉 开 
十 来 步 的 距离 了 , 才 看 清 是 一 位 头 戴 斗 符 、 身 披 苇 衣 、 肩 打铁 锦 的 
农夫 ; 目送 农夫 拐 进 了 埠 子 , 才 知 道 天 下 了 小 雨 。 

这 般 山 静 莹 激 的 田园 牧歌 , 不 正 是 陶 济 明 共 窒 以 求 的 桃花 源 吗 ? 





图 5.24 网 页 效果 图 
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要 求 : 根据 给 定 的 素材 ， 首 先 设置 页 面 属性 。 其 次 定义 特定 ID 的 DIV 标签 的 CSS 样 
式 , 然后 插入 DIV 标签 , 在 DIV 中 插入 网 页 元 素 , 最 后 通过 定义 类 , 设置 图 像 的 CSS 样式 。 

(2) 在 网 页 中 添加 CSS 扩展 效果 : 滤 镜 。 

要 求 : 制作 投影 字体 、 图 像 的 透明 效果 等 ， 如 图 5.25 所 示 。 


hello woxd 


«fy «<i> 
[| EN 
天 星 工 作 室 漫天 星 工作 室 
图 5.25 滤 镜 效果 
4. 课时 安排 
上 机 实验 课时 安排 为 2 课时 。 
5. 实验 指导 











1) 利用 CSS 样式 表 制 作 精美 的 网 页 。 

(1) 新 建 一 个 本 地 站 点 ， 在 站 点 内 新 建 两 个 子 文件 夹 一 -images 和 css， 将 图 像素 材 保 
存 到 images 文件 夹 。 新 建 一 个 网 页 ， 保 存 为 index.htm。 

(2) 页 面 属性 的 设置 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ， 在 “页 面 属性 ”对 
话 框 中 ， 设 置 背景 图 像 为 images/bg:jpg、 页 边 距 均 为 0， 设置 字体 大 小 为 14 像素 、 字 体 颜 
色 为 灰色 (#666) 。 

(3) 在 “CSS 设计 器 ”面板 中 ， 单 击 左 上 角 的 “ 源 ” 按 钮 出， 单 击 “ 创 建新 的 CSS 文 
件 ” 按 钮 ， 创 建 CSS 文件 ， 命 名 为 main.css， 之 后 在 “选择 器 ”文本 框 中 输入 ##mage01( 这 
区 域 用 于 放置 图 像 ); 弹出 “ 帮 mages01 的 CSS 规则 定义 ”对 话 框 ， 单 击 “ 布 局 ”选项 卡 ， 
设置 宽度 为 200 像素 、 浮 动 为 左 对 齐 、 填 充 均 为 3 像素 ， 设 置 边界 一 一 上 为 500 像素 、 左 
为 30 像素 、 右 和 下 均 为 30 像素 。 选 择 “ 文 本 ”选项 卡 ， 设 置 文本 对 齐 为 居中 。 

(4) 在 CSS 设计 器 的 main.css 文件 中 新 建 一 个 “#content” 选 择 器 样式 。 弹 出 “#content 
的 CSS 规则 定义 ”对 话 框 ， 单 击 “ 文 本 ”选项 卡 ， 设 置 行 高 为 20 像素 、 文 本 缩 进 为 20 像 
素 ; 单 击 “ 布 局 ”选项 卡 ， 设 置 宽 度 600 像素 、 填 充 均 为 30 像素 。 设 置 边界 : 上 为 200 
像素 、 左 为 320 像素 、 右 和 下 均 为 30 像素 。 

(5) 重 定 义 标签 HL: 单 击 “ 文 本 ”选项 卡 ， 设 置 字体 大 小 24 像素 、 行 高 为 35 像素 、 
粗细 为 特 粗 、 颜 色 为 深 绿色 (#009900)。 

(6) 重 定义 标签 img: 单 击 “ 布 局 ”选项 卡 ， 设 置 填充 均 为 3， 边框 均 设 置 为 一 样式 
为 实 线 、 宽 度 为 1 像素 、 颜 色 为 灰色 (#666666)。 





= 
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(7) 插入 两 个 DIV 标签 , ID 分 别 为 image01 和 content， 然 后 在 image01 中 插入 两 幅 图 
像 ， 在 content 中 输入 文本 。 

2) 在 网 页 中 添加 CSS 扩展 效果 : 滤 镜 。 

(1) 制作 投影 字体 ， 切 换 到 源 代 码 视 图 ， 在 标签 中 加 入 class="touying"， 代 码 如 下 : 


<p class="touying">hello world</p> 


切换 到 CSS 样式 表 ， 在 代码 视图 中 输入 .touying { text-shadow: #000 5px 5px Spx: 
font-size: 36px: } 。 
(2) 按照 5.3.5 节 中 添加 滤 镜 的 步骤 进行 操作 ， 设 置 图 像 的 透明 效果 。 
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辅助 技术 


本 章 主 要 介绍 了 几 种 网 页 布局 技术 : 表格 布局 、Bootstrap 响应 式 布 局 、jQuery， 还 介 
绍 了 利用 JavaScript 制作 网 页 特效 的 方法 。 


【本 章 学 习 目标 】 

通过 本 章 学 习 ， 读 者 能 够 : 

e。 了解 网 页 版 面 布 局 技术 

e 掌握 利用 表格 布局 技术 

e 掌握 利用 Bootstrap 响应 式 布 局 技术 

e 掌握 在 Dreamweaver 中 使 用 jQuery UI Widget 
e 掌握 利用 JavaScript 制作 网 页 特效 的 方法 


6.1 ”网 页 版 面 布 局 概述 


网 页 版 面 布局 是 网 页 设计 中 的 一 项 重要 内 容 。 版 面 指 的 是 浏览 器 看 到 的 完整 的 一 个 页 
面 。 因 为 每 个 人 的 显示 器 分 辨 率 不 同 ， 所 以 同一 个 页 面 的 分 辩 率 可 能 出 现 1024 像素 X768 
像素 、1280X 1024 像素 等 。 布 局 就 是 以 最 适合 浏览 的 方式 将 图 片 和 文字 摆 放 在 页 面 的 不 同 
位 置 。 网 页 版 面 布局 是 指 规定 网 页 内 容 在 浏览 器 中 的 显示 方式 ， 例 如 微 标的 位 置 、 导 航 栏 
的 显示 、 主 要 内 容 的 排版 等 。 经 常用 到 的 版 面 布局 结构 主要 有 以 下 几 种 : 

1. “T” 结 构 布 局 

页 面 顶 部 为 横 条 的 网 站 标志 和 广告 条 ， 下 方 为 主 菜单 ， 右 面 显示 内 容 的 布局 ， 因 为 菜 
单条 的 背景 较 深 ， 整 体 效 果 类 似 英 文字 母 “T”， 这 是 网 页 设计 中 用 得 最 广泛 的 一 种 布局 
方式 。 这 种 布局 的 优点 是 页 面 结构 清晰 ， 主 次 分 明 ， 是 初学 者 最 容易 上 手 的 布局 方法 ; 缺 
点 是 规矩 呆板 ， 如 果 在 细节 和 色彩 上 不 注意 修饰 突出 ， 很 容易 让 人 “看 之 无 味 ”， 如 图 6.1 
所 示 。 

2.“ 口 ”型 布局 

这 是 一 个 形象 的 说 法 ， 就 是 页 面 一 般 上 下 各 有 一 个 广告 条 ， 左 面 是 主 菜单 ， 右 面 是 友 
情 链接 等 ， 中 间 是 主要 内 容 。 这 种 布局 的 优点 是 充分 利用 版 面 ， 信 息 量 大 ; 缺点 是 页 面 拥 
挤 ， 不 够 灵活 ， 如 图 6.2 所 示 。 
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服务 热 疆 , 12345678963 和 首页 | 加 入 间 闪 















昆山 大 双 防水 工程 有 限 公司 
联系 人 ， 某 某 某 

联系 方式 ，12345678952 
网 址 : 

地 址 ; 江苏 省 江苏 省 江苏 省 
江苏 省 江苏 省 江苏 省 江苏 省 
江苏 省 











聊天 宝石 国际 交易 中 心 


网 站 前 页 公司 阅 介 工程 案例 。 新 闻 动 态 。 客户 国 言 。 联系 我 们 
有 限 公司 “联系 人 ， 某 其 菜 “手机 ，12345878950 网址 


图 6.1 “T” 结 构 布局 的 网 页 
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到 6.2 “ 口 ”型 布局 的 网 页 


3. “三 ” 形 布局 


这 种 布局 多 用 于 国外 站 点 ， 国 内 用 得 不 多 。 特 点 是 页 面 上 横向 两 条 色 块 ， 将 页 面 整体 
分 割 为 4 部 分 ， 色 块 中 大 多 放 广 告 条 。 
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4. POP 布局 
“POP” 引 自 广告 术语 ， 就 是 指 页 面 布局 像 一 张 宣 传 海报 ， 以 一 张 精 美 图 片 作 为 页 面 的 
设计 中 心 ， 如 图 6.3 所 示 。 常 用 于 时 尚 类 站 点 。 优 点 显而易见 ， 即 漂亮 吸引 人 ; 缺点 就 是 





图 6.3 POP 布局 的 网 页 


在 确定 好 版 面 布局 结构 后 ， 继 续 要 做 的 就 是 根据 内 容 调 整 页 面 的 结构 。 比 如 页 面 尺寸 
选择 多 大 ? 怎样 放置 网 页 的 网 页 元 素 ? 在 Dreamweaver 中 提供 了 多 种 方法 用 于 规划 和 布局 
页 面 ， 本 章 主 要 介绍 表格 和 Bootstrap 两 种 方式 。 


6.2 实例 导 人 : 表格 排版 网 页 


在 网 页 设计 中 ， 表 格 以 简洁 明了 和 高 效 快捷 的 方式 将 网 页 设计 的 各 种 元 素 有 序 地 组 织 
在 一 起 ， 使 整个 网 页 井井有条 。 

【 例 6.1】 某 电 气 工程 公司 网 站 ,如 图 6.4 所 示 。 在 本 实例 中 ,主要 涉及 以 下 知识 点 : 

1) 该 网 页 是 较为 典型 的 T 结构 布局 的 网 页 。 

2) 页 面 整体 布局 采用 表格 ， 表 格 划分 为 若干 个 单元 格 ， 在 单元 格 内 插入 网 页 元 素 。 

3) 通过 定义 单元 格 的 背景 颜色 达到 美化 网 页 的 效果 。 

4) 该 网 页 的 栏目 导航 信息 分 为 两 部 分 , 横 条 为 公司 网 站 总 的 导航 ， 竖 条 是 每 一 个 栏目 
的 导航 。 
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图 6.4 表格 布局 实例 


6.3 ”使 用 表格 布局 网 页 


表格 由 一 些 被 线条 分 开 的 单元 格 组 成 。 线 条 即 表格 的 边框 ， 被 边框 分 开 的 区 域 被 称 为 
外 元 格 ， 数 据 、 文 字 、 图 像 等 网 页 元 素 均 可 根据 需要 放置 在 相应 的 单元 格 中 ， 如 图 6.5 
所 示 。 
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在 网 页 中 使 用 表格 一 般 有 两 种 情况 :一 种 是 在 需要 组 织 数据 显示 时 用 ;， 另 一 种 是 在 布 
局 网 页 时 用 。 当 表格 被 用 作 布 局 时 ， 需 要 对 表格 的 属性 进行 设置 。 
6.3.1 插入 表格 和 编辑 表格 


表格 在 网 页 中 通常 存在 两 种 形式 : 一 种 是 以 独立 的 形式 存在 ; 另 一 种 是 以 棋 套 的 形式 
存在 。 

1. 插入 独立 表格 

插入 表格 一 般 有 两 种 方法 。 

方法 一 : 单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “表格 ”按钮 。 

方法 二 : 选择 “插入 ”菜单 一 “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 如 图 6.6 所 示 。 














行 数 : 回 
表格 宽度 : 200 像素 
边框 粗细 : 1 像 末 

单元 格 边 距 
































图 6.6 “表格 ”对 话 框 


在 “表格 ”对 话 框 中 输入 以 下 参数 : 

1) 表格 的 行 数 和 列 数 。 

2) 表格 宽度 : 宽度 的 单位 有 两 种 一 像素 和 百分比 。 像 素 是 绝对 值 ， 一 般 最 外 层 表 
格 选择 绝对 像素 ， 即 整个 页 面 的 尺寸 ， 表 格 宽度 的 大 小 与 显示 器 分 辨 率 有 关 。1024X768 的 
分 辨 率 选择 范围 为 930 一 1007 像素 。 这 里 要 强调 的 是 ， 如 果 选 择 的 是 高 分 辩 率 时 显示 的 页 
面 尺寸 ， 在 低 分 辨 率 浏 览 时 会 出 现 横向 滚动 条 ;而 选择 低 分 辩 率 时 显示 的 页 面 尺 寸 ， 在 高 
分 辨 率 浏 览 时 会 出 现 较 多 的 空白 ， 因 此 最 外 层 表格 宽度 的 选择 必须 慎重 。 百 分 比 是 指 表格 
的 宽度 与 浏览 器 界面 之 间 的 相对 百分比 ， 一 般 内 嵌 表 格 采用 百分比 设置 宽度 。 

3) 边框 粗细 : 如 果 表格 是 用 来 布局 页 面 的 ， 边 框 粗细 值 设 为 0。 

4) 单元 格 边 距 : 设置 单元 格 内 容 与 单元 格 边缘 之 间 的 距离 。 

5) 单元 格 间距 : 设置 表格 单元 格 之 间 的 距离 。 

6) 标题 : 选择 一 种 表格 页 面 格式 。 

7) 辅助 功能 : 比如 给 表格 设置 标题 以 及 选择 标题 所 在 的 位 置 等 。 
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设置 完毕 后 ， 单 击 “ 确 定 ”按钮 ， 即 可 在 指定 位 置 插入 一 个 表格 ， 插 入 后 表格 处 于 选 
中 状态 ， 如 图 6.7 所 示 。 























500~ 





图 6.7 插入 的 表格 


2. 插入 谤 套 表格 


在 网 页 中 为 了 保证 各 部 分 内 容 之 间 的 相对 独立 性 ， 而 不 会 因为 编辑 其 他 内 容 的 同时 被 
修改 ， 在 网 页 中 普遍 存在 表格 的 嵌 套 形式 。 一 般 网 页 有 一 个 大 的 外 层 表格 ， 按 区 域 划分 为 
若干 单元 格 ， 然 后 在 区 域 单元 格 中 再 插入 嵌 套 表格 ， 这 样 各 区 域 的 排版 规范 又 灵活 。 操 作 
步骤 如 下 : 

将 光标 放 在 表格 的 某 个 单元 格 内 ， 再 单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “表格 ”按钮 ， 
如 图 6.8 所 示 。 




















[ 
一 一 一 一 
| 














图 6.8 霸 套 表格 


3. 编辑 表格 


1) 增加 行 与 列 

方法 一 : 将 光标 放 在 单元 格 内 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 ， 选 择 “表格 ” 
选项 一 “插入 行 ”/“ 插 入 列 ”( 或 “插入 行 或 列 ”) 命 令 ， 在 当前 单元 格 的 上 方 插入 一 行 ， 
或 在 当前 单元 格 的 右 侧 插入 一 列 。 如 果 选 择 “插入 行 或 列 ” 命 令 ， 则 弹出 “插入 行 或 列 ” 
对 话 框 ， 设 置 在 表格 中 要 添加 的 行 数 或 列 数 以 及 插入 位 置 ， 单 击 “ 确 定 ” 按 钮 ， 如 图 6.9 
所 示 。 


插入: @ 行 (E) 
ON 


行 数 ( 人 D: 1 [a 
位 置 : 〇 所 选 之 上 (4) 
加 所 选 之 下 (B) 





图 6.9 “插入 行 或 列 ” 对 话 框 
方法 二 : 将 光标 放 在 单元 格 内 时 ， 选 择 “ 修 改 ” 菜 单一 “表格 对 象 ”选项 一 “在 上 方 
插入 行 ”/“ 在 下 方 插入 列 ”( 或 “在 左边 插入 列 ”/“ 在 右边 插入 列 ”) 命 令 ， 则 在 当前 单元 
格 的 上 方 或 下 方 插入 一 行 ， 或 在 当前 单元 格 的 左 侧 或 右 侧 插入 一 列 。 
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2) 删除 行 或 列 

方法 一 : 将 光标 放 在 单元 格 内 ， 选 择 “ 修 改 ” 菜 单一 “表格 ”选项 一 “删除 行 ”(“ 删 
除 列 ”) 命 令 ， 删 除 当前 行 (或 当前 列 )。 

方法 二 : 将 光标 放 在 单元 格 内 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 ， 选 择 “ 表 格 ” 
选项 一 “删除 行 ”( 或 “删除 列 ”) 命 令 ， 删 除 当前 行 (或 当前 列 )。 

方法 三 : 选中 行 或 列 ， 按 Del 键 。 


3) 排序 表格 

创建 表格 并 向 表格 中 添加 数据 后 ， 这 些 数据 可 能 是 杂乱 无 序 的 。Dreamweaver 中 提供 
了 排序 表格 功能 。 操 作 步 骤 如 下 : 

选中 表格 ， 选 择 “ 命 令 ” 菜 单一 “排序 表格 ”命令 ， 弹 出 “排序 表格 ”对 话 框 ， 如 
图 6.10 所 示 ， 根 据 需 要 进行 相关 参数 的 设置 ， 单 击 “ 确 定 ” 按 钮 。 


| 





排序 按 : 列 1 v 
顺序 : 按 字 母 顺序 Y | 升序 v 


再 按 : 


上 顺序: | 按 字 母 顺序 vj 开启 v 








选 页 口 排序 包含 第 一 行 

口 排序 标题 行 

口 排序 如 注 行 

口 完成 排序 后 所 有 行 颜色 保持 不 变 











图 6.10 “排序 表格 ”对 话 框 


4) 导入 与 导出 表格 数据 

Dreamweaver 提供 了 与 外 界 数据 交换 的 功能 。 在 其 他 程序 中 创建 的 数据 ， 例 如 Excel 
电子 表格 数据 、Word 文档 或 是 文本 文件 ， 可 以 导入 到 Dreamweaver 中 并 格式 化 为 表格 。 
同样 ， 也 可 以 将 网 页 中 的 表格 导出 为 其 他 格式 的 文件 。 

1) 导入 表格 数据 

选择 “文件 ”菜单 一 “导入 ”选项 一 “导入 表格 式 数 据 ” 命 令 ( 也 可 导入 Word 文档 、 
Excel 文档 、XML 到 模板 中 )。 弹 出 “导入 表格 式 数据 ”对 话 框 ， 如 图 6.11 所 示 ， 选 择 数 
据 文 件 的 路 径 ， 进 行 相关 参数 的 设置 ， 单 击 “ 确 定 ” 按 钮 。 

2) 导出 表格 数据 

将 光标 放 在 要 导出 表格 的 任意 单元 格 内 ， 选 择 “ 文 件 ”菜单 一 “导出 ”选项 一 “表格 ” 
命令 ， 弹 出 “导出 表格 ”对 话 框 ， 如 图 6.12 所 示 。 设 置 定 界 符 和 换行 符 ， 单 击 “ 导 出 ” 按 
钮 ， 弹 出 “表格 导出 为 ”对 话 框 ， 在 此 选择 文件 路 径 和 输入 文件 名 称 ， 单 击 “ 保 存 ” 按 钮 。 
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雪 据 文件 :[ | 


定 界 符 : Tab 








表格 宽度 图 匹配 内 容 
口 设 轩 为: 百分比 
单元 格 边 距 :| | 格式 化 首 行 : [天 格式] yj 
单元 格 间距 :| 边民 1 




















图 611 “导入 表格 式 数据 ”对 话 框 图 6.12 “导出 表格 ”对 话 杠 
6.3.2 ”表格 及 单元 格 属性 的 设置 


1. 表格 属性 的 设置 

要 对 表格 进行 属性 设置 ， 必 须 首先 选中 表格 ， 选 中 表格 的 常用 方法 有 以 下 4 种 : 

方法 一 : 将 光标 置 于 表格 内 ， 单 击 “ 文 档 ” 窗 口 左下 角 的 <table> 标 签 以 选中 整个 表格 。 

方法 二 : 将 光标 移 到 表格 的 边框 处 ， 单 击 鼠 标 左 键 选中 表格 。 

方法 三 : 将 光标 置 于 表格 内 ， 选 择 “ 修 改 ” 菜 单一 “表格 ”选项 一 “选择 表格 ”命令 ， 
选中 表格 。 

方法 四 : 将 光标 置 于 表格 内 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 ， 选 择 “ 表 格 ” 选 
项 一 “选择 表格 ”命令 ， 选 中 表格 。 

选中 表格 后 ， 在 “属性 ”面板 中 设置 表格 的 属性 ， 如 图 6.13 所 示 。 








属 生 
国 是 行 (2 | 帘 () 200 | 保 素 vCallnad JE vc 无 8 
aa anspus | Bede 
剧种 名 加 ES 
肥 
图 6.13 表格 属性 的 设置 
其 中 各 项 属性 的 功能 如 下 : 


1) 表格 : 设置 表格 的 名 称 。 

2) 行 与 列 : 设置 表格 的 行 数 和 列 数 。 

3) 宽 : 设置 表格 宽度 ， 单 位 为 像素 或 百分比 。 

4) 间距 (CellSpace): 设置 单元 格 之 间 的 间隔 ， 即 单元 格 间距 。 

5) 填充 (CellPad): 设置 单元 格 内 容 与 单元 格 边缘 之 间 的 距离 。 

6) 边框 (Border): 设置 表格 边框 的 宽度 ， 单 位 为 像素 。 表 格 用 于 排版 时 ， 一 般 边 框 设 
置 为 0。 

7) 对 齐 (Align): 设置 表格 在 页 面 中 的 对 齐 方式 。 

8) 类 (Class): 为 选 定 对 象 加 入 CSS 样式 。 

9) 到 :清除 所 设置 的 列 宽 。 

10) 到 :清除 所 设置 的 行 高 。 

11) 副 设置 列 宽 的 单位 为 像素 。 

12) 报 : 设置 列 宽 的 单位 为 百分比 。 
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2. 单元 格 属性 的 设置 


将 光标 放 在 单元 格 内 ， 在 “属性 ”面板 中 设置 单元 格 属性 ， 如 图 6.14 所 示 。“ 属 性 ” 
面板 又 分 为 上 下 两 部 分 , 上 半 部 分 可 设置 单元 格 中 的 文本 属性 ， 下 半 部 分 设置 单元 格 属性 。 
在 设置 单元 格 中 的 文本 属性 时 ， 分 为 “HIML ”选项 和 “CSS” 选 项 。 
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图 6.14 单元 格 属性 的 设置 


其 中 单元 格 各 项 属性 的 功能 如 下 : 
1) 水 平和 垂直 : 设置 单元 格 中 网 页 元 素 的 水 平 及 垂直 对 齐 方式 ， 默 认 对 齐 为 水 平 左 对 
齐 、 垂 直 居 中 ， 如 图 6.15(a) 所 示 。 可 在 “属性 ”面板 中 设置 ， 如 图 6.15(b) 所 示 。 


A A 


(a) 单元 格 对 齐 方式 ， 默 认 对 齐 方 式 (b) 单元 格 对 齐 方式 : 水 平 居 中 、 季 直 项 端 
图 6.15 对齐 方式 

2) 宽 和 高 : 用 于 设置 单元 格 的 宽度 和 高 度 ， 单 位 默认 为 像素 。 在 数值 后 输入 %， 即 采 
用 百分比 为 单位 。 也 可 将 鼠标 放 在 单元 格 的 边框 处 直接 拖 动 ， 改 变 行 高 和 列 宽 。 

3) “不 换行 ” 复 选 框 : 选中 此 选项 , 防止 换行 , 设置 单元 格 中 的 所 有 文本 都 在 一 行 上 ， 
单元 格 宽度 会 随 之 变 宽 。 不 选 此 选项 ， 当 单元 格 中 的 文本 内 容 超过 单元 格 宽度 时 ， 自 动 换 
行 ， 单 元 格 宽度 不 变 。 

4) “标题 ” 复 选 框 : 将 所 选 的 单元 格 设置 为 表格 标题 单元 格 。 该 单元 格 中 的 文本 内 容 
为 粗 体 、 居 中 对 齐 。 

5) 背景 颜色 : 设置 单元 格 的 背景 颜色 。 

0) 国 , 合并 所 选单 元 格 。 

7) 葱 : 拆 分 所 选单 元 格 。 


6.3.3 ”使 用 表格 排版 网 页 


表格 是 能 将 网 页 元 素 按 设 计 者 要 求 的 方式 显示 的 一 种 排版 技术 。 通 过 单元 格 的 拆 分 、 
合并 以 及 在 单元 格 中 插入 峰 套 表格 等 方法 对 网 页 元 素 进行 更 细致 的 控制 。 操 作 步 又 如 下 

1) 插入 一 个 表格 , 按照 事先 考虑 好 的 版 面 设计 将 表格 划分 为 几 个 大 的 单元 格 , 设置 合 
适 的 宽度 ， 边 框 设 置 为 0， 使 边框 不 可 见 ， 需 要 时 可 在 单元 格 中 插入 翌 套 表格 ， 同 样 将 边 
框 设 为 0 ， 使 边框 不 可 见 。 

2) 向 各 个 单元 格 中 加 入 网 页 元 素 ， 编 辑 完毕 后 保存 文档 。 
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使 用 表格 构造 网 页 布局 时 应 遵循 如 下 原则 : 

1) 要 规划 好 再 运行 ， 甚 至 要 进行 无 数 次 的 实验 和 重复 运行 才能 制作 出 好 的 页 面 框架 。 

2) 从 外 向 内 工作 。 先 建立 最 大 的 表格 ， 再 在 内 部 创建 嵌 套 的 较 小 表格 。 

3) 在 外 部 使 用 绝对 像素 方法 ， 在 内 部 使 用 相对 百分比 方法 。 

如 图 6.16 所 示 ， 图 的 上 方 为 网 页 草图 ， 图 的 下 方 是 根据 网 页 草图 插入 的 表格 ， 进 行 单 
元 格 属性 的 设置 ， 然 后 在 单元 格 中 插入 网 页 元 素 。 
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图 6.16 使 用 表格 构造 网 页 框架 


6.3.4 ”表格 排版 实例 的 制作 过 程 


本 节 讲 解 利用 表格 进行 网 页 布局 的 制作 过 程 。 作 为 专业 的 设计 者 ， 首 先 利用 图 形制 作 
软件 ， 比 如 Fireworks、Photoshop 等 ， 绘 制 一 张 网 页 草图 ， 然 后 根据 网 页 草图 利用 表格 对 
网 页 进行 排版 。 本 网 页 实例 的 制作 过 程 如 下 : 

1) 先 设 计 网 页 首页 草图 ， 采 用 的 分 辨 率 为 1024X768， 网 页 草图 如 图 6.4 所 示 。 

2) 创建 本 地 站 点 ， 站 点 名 为 WWW， 并 在 该 站 点 的 根 目 录 下 创建 images 文件 夹 ， 用 
于 存储 图 像素 材 。 

3) 新 建 一 个 网 页 ， 命 名 保存 为 iIndex.htm， 编 辑 该 网 页 。 

4) 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ， 选 择 “ 外 观 CSS” 选 项 卡 ， 设 置 页 面 字 
体 为 默认 字体 、 字 体 大 小 为 14 像素 、 文 本 颜色 为 黑色 (#000000)、 页 边 距 均 为 0; 选择 “ 标 
题 / 编码 ”选项 卡 ， 设 置 页 面 标题 为 XXXX 自动 化 股份 有 限 公 司 ; 选择 “跟踪 图 像 ”选项 
卡 ， 选 择 跟 踪 图 像 的 路 径 一 一 images/ 网 页 草图 02.jpg， 透 明度 设置 为 20% ， 单 击 “ 确 定 ” 
按钮 ， 如 图 6.17 所 示 。 
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跟踪 图 信 
趴 于 图 急 (): [insges/ 网 页 草本 oz jps 。 | | 济 史 
透明 度 () 





























图 6.17 选择 跟踪 图 像 


5) 单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “表格 ”按钮 ， 插 入 居中 排列 的 多 个 表格 ， 表 格 
宽度 统一 为 920 像素 。 

6) 第 1 个 表格 为 两 列 ， 在 第 一 个 单元 格 中 插入 logo 图 标 ， 在 第 二 个 单元 格 中 插入 民 
套 表 格 ， 输 入 文本 。 

7) 第 2 个 表格 为 三 列 , 在 中 间 单 元 格 中 插入 导航 文本 , 在 左右 两 侧 单元 格 中 插入 带 圆 
弧 的 小 图 片 。 

8) 第 3 个 表格 为 一 列 ， 插 入 一 幅 宽 为 920 像素 的 图 像 。 

9) 第 4 个 表格 为 三 列 ， 在 左 侧 单元 格 中 嵌 套 一 个 多 行 表格 ,然后 插入 图 像 和 文本 ， 中 
间 单 元 格 为 空白 ， 起 到 分 界 的 作用 ， 将 右 侧 单元 格 拆 分 为 多 行 ， 然 后 插入 文本 和 图 像 ， 如 
图 6.18 所 示 。 

10) 在 最 下 方 的 表格 中 ， 插 入 版 权 信息 以 及 网 站 的 备案 编号 等 。 

保存 网 页 ， 按 F12 键 ， 浏览 网 页 ， 六 网 要 冯 困 加 图 6.4 所 示 。 








J9y9 





图 6.18 表格 排版 过 程 
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6.4 Bootstrap 响应 式 布局 


6.4.1 什么 是 响应 式 布局 ? 


响应 式 布局 是 Ethan Marcotte 在 2010 年 5 月 提出 的 一 个 概念 ， 简 而 言 之 ， 就 是 一 个 网 
站 能 够 兼容 多 个 终端 一 一 而 不 是 为 每 个 终端 做 一 个 特定 的 版 本 。 如 图 6.19 所 示 ， 这 个 概念 
是 为 解决 移动 互联 网 浏览 而 诞生 的 。 





图 6.19 响应 式 Web 设计 实现 网 页 多 终端 兼容 


响应 式 布 局 是 一 个 让 用 户 通过 各 种 尺寸 的 设备 浏览 网 站 以 获得 良好 视觉 效果 的 方法 。 
例如 ， 先 在 计算 机 显示 器 上 浏览 一 个 网 站 ， 然 后 在 智能 手机 上 浏览 ， 智 能 手机 的 屏幕 尺寸 
远 小 于 计算 机 显示 器 ， 但 是 你 却 没 有 感觉 到 有 任何 差别 ， 两 者 的 用 户 体验 几乎 一 样 ， 这 说 
明 这 个 网 站 在 响应 式 设计 方面 做 得 很 好 。 

响应 式 布局 可 以 为 不 同 终端 的 用 户 提供 更 加 舒适 的 界面 和 更 好 的 用 户 体验 ， 而 且 随 着 
目前 大 屏幕 移动 设备 的 普及 ， 用 “大 势 所 趋 ”来 形容 也 不 为 过 。 随 着 越 来 越 多 的 设计 师 采 
用 这 个 技术 ， 我 们 不 仅 看 到 很 多 的 创新 ， 还 看 到 了 一 些 成 形 的 模式 。 


6.4.2 ”Bootstrap 简 介 


Bootstrap 来 自 于 Twitter, 是 目前 很 受 欢迎 的 前 端 框 架 。 它 基于 HTML、CSS、JavaScript， 
简洁 灵活 ， 使 得 Web 开发 更 加 快捷 。 它 由 Twitter 的 设计 师 Mark Otto 和 Jacob Thomton 
合作 开发 ， 是 一 个 CSS/HTML 框架 。Bootstrap 提供 了 优雅 的 HIML 和 CSS 规范 ， 由 动态 
CSS 语言 Less 写成 。Bootstrap 一 经 推出 后 颇 受 欢迎 ， 一 直 是 GitHub 上 的 热门 开源 项 目 ， 
包括 MSNBC( 微 软 全 国 广播 公司 ) 的 Breaking News 都 使 用 了 该 项 目 。 国 内 一 些 移动 开发 者 
较为 熟悉 的 框架 ， 如 WeX5 前 端 开源 框架 等 ， 也 基于 Bootstrap 源码 进行 性 能 优化 而 来 。 

由 于 Bootstrap 是 基于 HTML5 和 CSS3 开发 的 , 因此 基于 Bootstrap 开发 的 网 站 具有 响 
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应 式 布 局 的 特性 ， 它 在 jQuery 的 基础 上 进行 了 更 为 个 性 化 和 人 性 化 的 完善 ， 形 成 一 套 自己 
独 有 的 网 站 风格 ， 并 兼容 大 部 分 jQuery 插件 。 

1. 为 什么 使 用 Bootstrap? 

1) 移动 设备 优先 : 自 Bootstrap 3 起 ， 该 框架 包含 了 贯穿 于 整个 库 的 移动 设备 优先 的 
样式 。 

2) 浏览 器 支持 : 所 有 的 主流 浏览 器 都 支持 Bootstrap， 如 图 6.20 所 示 。 


eee@ee0 


Internet Explorer Chrome 


图 6.20 Bootstrap 支持 的 浏览 器 列表 


3) 容易 上 手 : 只 要 具备 HTML 和 CSS 的 基础 知识 ， 就 可 以 开始 学 习 Bootstrap。 

4) 响应 式 设计 :Bootstrap 的 响应 式 CSS 能 够 自 适 应 于 台式 机 、 平 板 电 脑 和 手机 。 

5) 为 开发 人 员 创 建 接口 ， 提 供 了 一 个 简洁 统一 的 解决 方案 。 

6) 包含 了 功能 强大 的 内 置 组 件 ， 易 于 定制 。 

7) 还 提供 了 基于 Web 的 定制 。 

8) 代码 开源 。 

2. Bootstrap 包含 的 内 容 

1) 基本 结构 : Bootstrap 提供 了 一 个 带 有 网 格 系统 、 链 接 样式 、 背 景 的 基本 结构 。 

2) CSS: Bootstrap 自 带 以 下 特性 一 一 全 局 的 CSS 设置 、 定 义 基本 的 HTML 元 素 样式 、 
可 扩展 的 class 以 及 一 个 先进 的 网 格 系统 。 这 将 在 Bootstrap CSS 部 分 详细 讲解 。 

3) 组 件 : Bootstrap 包含 了 十 几 个 可 重用 的 组 件 ， 用 于 创建 图 像 、 下 拉 菜 单 、 导 航 、 
警告 框 、 弹 出 框 等 。 

4) JavaScript 插件 : Bootstrap 包含 了 十 几 个 自 定义 的 jQuery 插件 。 可 以 直接 包含 所 有 
的 插件 ， 也 可 以 逐个 包含 这 些 插件 。 

5) 定制 : 可 以 定制 Bootstrap 的 组 件 、Less 变量 和 jQuery 插件 来 得 到 自己 的 版 本 。 


6.4.3 ”基于 Bootstrap 搭建 响应 式 布局 网 站 


1. 创建 基本 的 HTML 模板 


在 开始 设计 网 站 前 , 我 们 需要 一 个 基本 的 HIML 模板 , 这 样 就 能 够 把 所 需 的 Bootstrap 
文件 包含 进来 。 下 面 就 是 我 们 Bootstrap 项 目的 开头 ， 输 入 这 些 代 码 到 一 个 文件 中 并 将 其 
命名 为 index.html。 

<!DOCTYPE html> 


<html lang="zh-CN"> 
<head> 
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<meta charset=—"utf-8"> 

<meta http-equiv="X-UA-Compatible" content "IE=edge"> 

<meta name="viewport" content="width=device-width， initial-scale=1"> 
<title> 寒 战 2 电影 宣传 </title> 

<style type='text/css> 


body { 
background-color: #CCC: 


} 
</style> 
</head> 
<body> 
</body> 
</html> 
在 这 段 代码 中 , 我 们 已 经 添加 了 一 些 CSS 样式 以 使 页 面 的 背景 呈 亮 灰色 ， 因 为 这 样 我 
们 能 够 轻易 地 在 设计 中 看 见 不 同 的 列 ， 使 它们 更 加 容易 理解 。 


2. 引入 Bootstrap 文件 


为 了 使 用 Bootstrap， 我 们 仅仅 需要 把 相关 文件 引入 到 我 们 的 模板 中 来 。 引 入 文件 有 很 
多 种 方法 ， 下 面 将 会 通过 CDN 来 引入 Bootstrap 文 件 而 不 需要 下 载 任 何 文件 。 将 
bootstrap-combined.min.css 文 件 放 在 一 个 可 供 读者 调用 的 网 站 上 , 读者 只 需要 将 如 下 代码 输 
入 至 index.html 的 <head> 标 签 内 ， 就 能 够 使 所 有 的 Bootstrap CSS 在 我 们 的 模板 中 生效 : 


<link href="http://xijingjpk.qiniudn.com/bootstrap-combined.min.css" rel="stylesheet"> 


3. 设置 Bootstrap 的 容器 


Bootstrap 的 container 类 是 非常 有 用 的 , 它 能 在 页 面 中 创建 一 个 居中 的 区 域 , 使 设计 者 
能 够 把 其 他 位 置 的 内 容 放 到 里 面 。container 类 相当 于 创建 了 一 个 具有 静态 宽度 并 且 margin 
值 为 auto 的 一 个 居中 的 DIV 框 。Bootstrap 的 container 类 的 优点 在 于 它 是 响应 式 的 ， 它 会 
以 当前 屏幕 的 宽度 为 基础 计算 出 最 佳 的 宽度 予以 应 用 。 

在 body 标签 中 ， 使 用 container 类 创建 一 个 DIV。 它 会 作为 页 面 主要 的 放置 其 他 代码 
的 外 层 包 里 ， 代 码 如 下 : 


<div class='container> 
</div> 


接 下 来 ， 在 style 标签 中 ， 为 网 页 的 不 同 区 域 设置 颜色 及 高 度 : 


#content { 
background-color: #FFF:; 
border-radius: Spx: 

} 


#content main { 
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Padding: 20px; 

} 

#content .sidebar { 
padding: 10px; 

} 

#contentp { 
line-height: 30px: 

} 


4. 设置 标题 和 导航 


现在 我 们 已 经 有 一 个 地 方 可 以 添加 额外 的 HTML 代码 , 可 以 添加 标题 文本 , 然后 再 创 
建站 点 的 主要 导航 条 。 
加 入 如 下 文本 或 你 选择 的 文字 到 container 类 的 DIV 标签 中 : 


<hl> 寒 战 2 电影 宣传 <hl> 


Bootstrap 有 一 个 nav 类 ， 让 我 们 能 够 创建 各 种 各 样 的 导航 元 素 ， 可 以 在 hl 标签 之 后 
加 入 如 下 代码 : 


<div class='navbar navbar-inverse'> 
<div class='navbar-inner nav-collapse' style="height: auto:"> 
<ul class="nav"> 
<li class="active"><a hre 伍 "#> 网 站 首页 </a></li> 
<li><a hre 伍 "#"> 剧 情 梗概 </a></li> 
<li><a hre 伍 "#"> 人 物 介 绍 </a></li> 
<li><a hre 伍 "#"> 周 边 产 品 </a></li> 
<li><a hre 伍 "#"> 联 系 我 们 </a></li> 
</ul> 
</div> 
</div> 
navbar 相关 的 类 拥有 导航 条 的 所 有 样式 , 添加 navbar-inverse 类 将 会 应 用 一 种 很 酷 的 黑 
色 风 格 ， 这 是 Bootstrap 的 常见 搭配 。 建 议 在 这 个 样式 的 基础 上 进行 拓展 ， 从 而 创造 独 一 无 
二 的 导航 。 但 在 这 里 我 们 仍然 会 使 用 基础 的 Bootstrap 样式 。 
如 上 述 代 码 所 示 ， 在 类 为 navbar 的 DIV 中 ， 我 们 添加 另 一 个 类 为 nav-collapse 的 DIV 
并 为 其 添加 行内 样式 height:auto; 这 告诉 Bootstrap 当 这 个 页 面 在 小 于 970px 宽度 的 浏览 器 
窗口 中 时 ， 它 会 提供 一 个 压缩 的 切换 视图 。 同 时 ， 我 们 可 以 添加 nav 类 到 一 个 HTML 无 序 
列表 元 素 中 , 以 便 从 Bootstrap CSS 文件 中 应 用 更 多 的 样式 , 也 可 以 添加 一 个 active 类 到 “网 
站 首页 ”列表 项 中 。 


5. 填充 主 内 容 和 侧 边 栏 
现在 ， 我 们 已 经 完成 了 站 点 的 主导 航 ， 现 在 我 们 需要 添加 内 容 区 域 和 侧 边栏 来 支持 更 
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多 的 链接 或 导航 路 径 。 请 把 下 面 的 代码 添加 到 导航 条 代码 之 后 : 


<div id='content' class=row-fluid> 
<div class='span9 main'> 
<h2> 电 影 概 况 </h2> 
</div> 
<div class='span3 sidebar> 
<h2> 栏 目 导航 </h2> 
</div> 
</div> 
这 正 是 我 们 需要 学 习 的 Bootstrap 的 栅 格 系统 ， 栅 格 系统 利用 了 12 列 的 布局 ， 这 意味 
着 一 个 页 面 可 以 被 分 割 成 12 个 相同 的 列 。 下 面 这 张 从 Bootstrap 官方 文档 中 拿 到 的 图 片 给 
出 了 很 好 的 展示 ， 见 图 6.21 。 


1 (| 1 | 1 1 1 和 1 


图 6.21 Bootstrap 栅 格 系统 


在 我 们 刚刚 添加 到 导航 条 下 面 的 代码 中 ， 可 以 看 到 名 为 span9 和 span3 的 类 。 它 们 会 
把 页 面 分 割 成 左边 9 列 宽度 和 右边 3 列 宽度 的 两 部 分 ， 形 成 我 们 的 内 容 区 域 和 侧 边 栏 。 使 
用 栅 格 系统 的 其 中 一 个 好 处 就 是 它 会 根据 视窗 宽度 动态 计算 出 列 的 宽度 ， 因 此 不 需要 写 任 
何 媒体 查询 ， 也 能 使 站 点 工作 在 任何 屏幕 分 辩 率 下 。 

可 以 通过 改变 span 的 数量 和 调整 浏览 器 的 大 小 来 观察 它们 的 效果 。 你 会 注意 到 当 内 容 
区 域 小 于 724 像素 的 时 候 ， 这 些 列 会 垂直 堆放 。 

现在 ， 我 们 在 内 容 区 域 插入 一 张 照片 及 一 段 文 字 ， 放 在 “<h2> 电 影 概 况 <h2>” 标 签 
之 后 ， 这 只 是 为 了 把 页 面 拉 长 一 点 ， 给 <img> 标 签 增 加 “.img-responsive” 类 可 以 使 图 片 增 
加 响应 式 效果 ， 自 动 缩放 。 

<img src="images/pic.jpg" class=".img-responsive"> 

<p>《 寒 战 2》 是 《寒战 ) 系列 的 第 二 部 ， 由 梁 乐 民 、 陆 剑 青 执导 的 香港 警匪片 ， 郭 富 城 、 梁 家 辉 、 
杨采妮 、 文 咏 珊 领衔 主演 ， 周 润 发、 彭 于 曼 、 李 治 廷 、 杨 社 宁 联合 主演 。 该 片 于 2016 年 7 月 8 日 在 中 国 
上 映 。 该 片 讲述 了 经 过 寒战 行动 后 ， 刘 杰 瘤 虽然 升任 警 务 处 处 长 ， 但 音 日 的 凶 徒 不 仅 还 道 遥 法 外 ， 甚 至 要 
将 行动 进一步 升级 ， 绑 架 他 的 妻 儿 ， 而 他 也 发 现 身 边 的 同僚 们 也 在 玩 着 权力 的 游戏 。</p> 





6. 设置 侧 边栏 导航 


可 以 在 这 里 看 到 Bootstrap 为 我 们 提供 的 所 有 导航 元 素 。 我 们 将 要 使 用 垂直 选项 卡 来 创 
建 一 个 额外 的 导航 区 。 复 制 和 粘贴 下 面 的 代码 到 “<h2> 栏 目 导 航 <h2>” 标 签 之 后 : 
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<ul class="nav nav-tabs nav-stacked"> 
<li><a hre 仁 #> 演 职员 表 </a></li> 
<li><a hre 仁 尖 > 音 乐 原声 </a></li> 
<li><a hre 仁 于 > 幕后 花絮 </a></li> 
<li><a hre 伍 #> 制 作 发 行 </a></li> 
<li><a hre 伍 #> 影 片 评价 </a></li> 
<u> 


这 是 一 个 简单 的 展示 ! 上 面 的 代码 按照 字面 理解 ， 仅 仅 是 一 个 具有 类 nav-tabs 和 


nav-stacked 的 无 序列 表 ， 但 它 却 为 我 们 创造 了 一 


-个 导航 面板 。 


看 看 最 后 的 效果 ， 一 个 基于 Bootstrap 的 响应 式 页 面 完成 了 ， 如 图 6.22 所 示 。 


EE x 
© WD file///C/Users/Administrator/Desktop/ 测 试 fc53/index html 


寒战 2 电影 宣传 
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图 6.22 最 终 页 面 效果 


读者 若 想 了 解 更 多 知识 ,请 阅读 Bootstrap 参考 书 或 访问 Bootstrap 中 文 网 站 (http://www. 


bootcss.comy)。 


6.5 使 用 jQuery UI Widget 


下 面 来 了 解 如 何 使 用 jQuery Widget 向 Dreamweaver Web 项 目 添加 类 似 于 应 用 程序 的 
功能 。 无 须 编写 代码 即 可 插入 折 释 式 元 素 、 选 项 卡 、 滑 块 和 自动 填写 框 。 

Widget 是 以 DHTML 和 JavaScript 等 语言 编写 的 小 型 Web 应 用 程序 ， 可 以 在 网 页 内 
插入 和 执行 。 此 外 ，Web Widget 帮助 提供 了 一 种 将 桌面 体验 复制 到 网 页 上 的 方法 。 

jQuery UI Widget( 如 折 又 式 、 选 项 卡 、 日 期 选择 器 、 滑 块 以 及 自动 完成 功能 ) 将 桌面 





























体验 带 到 Web 之 上 。 例 如 , 选项 卡 Widget 可 | 
功能 。 


于 在 桌面 应 用 程序 中 复制 对 话 框 的 选项 卡 
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6.5.1 插入 jQuery Widget 


插入 jQuery Widget 时 ， 代 码 中 会 自动 添加 以 下 内 容 : 


e 对 所 


有 相关 文件 的 引用 





e 包含 用 于 Widget 的 jQuery API 的 脚本 标签 。 其 他 Widget 被 添加 到 相同 的 脚本 标 


签 中 
。 有 关 


注意 : 


jQuery Widget 的 详细 信息 ， 请 参阅 http://jqueryui.com/demos/ 


对 于 jQuery 效果 ， 不 会 添加 对 jquery-1.8.24.minjs 的 外 部 引用 ， 因 为 该 文件 在 添加 
效果 时 会 自动 包括 进来 。 

操作 步骤 : 

1) 将 光标 置 于 页 面 中 要 插入 Widget 的 位 置 。 

2) 方法 一 :选择 “插入 ”菜单 一 “jQuery U1” 选项， 选择 要 插入 的 某 个 Widget。 


方法 三 : 


选择 “插入 ” 栏 一 “jQuery UI” 选项， 选择 要 插入 的 某 个 Widget( 例 如 Tabs) 


并 单 击 ， 如 图 6.23 所 示 。 


EE 
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图 6.23 利用 “插入 ” 栏 插入 jQuery Widget 


插入 “jQuery Widget” 后 ， 其 属性 显示 在 “属性 ”面板 中 ， 如 图 6.24 所 示 。 




















图 6.24 在 “属性 ”面板 中 设置 jQuery Widget 属性 


6.5.2 修改 jQuery Widget 


修改 jQuery Widget 的 步骤 如 下 : 
1) 选择 要 修改 的 Widget。 


在 “ 





属性 ”面板 中 修改 属性 。 
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例如 ， 要 向 “jQuery Widget” 中 的 Tabs( 如 图 6.25 所 示 ) 另 外 添加 一 个 选项 卡 ， 请 选择 
该 Widget， 然 后 单 击 “ 属 性 ”面板 中 的 “+”。 

还 可 根据 需要 进行 必要 的 修改 ， 可 修改 jQuery Widget 定制 的 CSS 和 Javascript 文件 ， 
以 修改 样式 和 动态 效果 。 


| Tab 1 | Tab2 | Tab3 | 





图 6.25 “jQuery Widget” 中 的 Tabs 


6.6 ”利用 JavaScript 制作 网 页 特效 


6.6.1 利用 JavaScript 制作 网 页 特效 


1. 什么 是 JavaScript 


JavaScript 是 一 种 直译 式 脚本 语言 ， 是 一 种 动态 类 型 、 弱 类 型 、 基 于 原型 的 语言 ， 内 置 
支持 类 型 。 它 的 解释 器 被 称 为 JavaScript 引擎 ， 为 浏览 器 的 一 部 分 。JavaScript 还 是 一 门 被 
广泛 用 于 客户 端的 脚本 语言 ， 最 早 是 在 HTML 网 页 上 使 用 ， 用 来 给 HTML 网 页 增加 动态 
功能 。 

同时 ，JavaScript 是 Web 开发 人 员 必 须 学 习 的 3 门 语言 中 的 一 门 : 

1) HTML 定义 了 网 页 的 内 容 

2) CSS 描述 了 网 页 的 布局 

3) JavaScript 定义 网 页 的 行为 

JavaScript 脚本 语言 具有 以 下 特点 : 

1) 脚本 语言 。JavaScript 是 一 种 解释 型 的 脚本 语言 ，C、C++ 等 语言 先 编译 后 执行 ， 而 
JavaScript 是 在 程序 的 运行 过 程 中 逐 行进 行 解释 。 

2) 基于 对 象 。JavaScript 是 一 种 基于 对 象 的 脚本 语言 ， 不 仅 可 以 创建 对 象 ， 也 能 使 用 
现 有 的 对 象 。 

3) 简单 。JavaScript 语言 采用 的 是 弱 类 型 的 变量 类 型 ， 对 使 用 的 数据 类 型 未 做 严格 要 
求 ， 是 基于 Java 基本 语句 和 控制 的 脚本 语言 ， 设 计 简单 紧凑 。 

4) 动态 性 。JavaScript 是 一 种 采用 事件 驱动 的 脚本 语言 ， 不 需要 经 过 Web 服务 器 就 可 
以 对 用 户 的 输入 做 出 响应 。 在 访问 网 页 时 ， 鼠 标 在 网 页 中 进行 单 击 或 上 下 移动 、 窗 口 移动 
等 操作 时 ，JavaScript 都 可 直接 对 这 些 事件 给 出 相应 响应 。 

5) 跨 平台 性 。JavaScript 脚本 语言 不 依赖 于 操作 系统 ， 仅 需要 浏览 器 的 支持 。 因 此 一 
个 JavaScript 脚本 在 编写 后 可 以 在 任意 机 器 上 使 用 ， 前 提 是 机 器 上 的 浏览 器 支持 JavaScript 
脚本 语言 ， 目 前 JavaScript 已 被 大 多 数 的 浏览 器 所 支持 。 
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2. jQuery 与 JavaScript 


jQuery， 顾 名 思 义 ， 也 就 是 JavaScript 和 查询 (Query)， 即 辅助 JavaScript 开发 的 库 。 

jQuery 是 继 prototype 之 后 又 一 个 优秀 的 JavaScript 库 。 它 是 轻 量 级 的 JS 库 ,兼容 CSS3， 
还 兼容 各 种 浏览 器 (IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+)，jQuery 2.0 及 后 续 版 本 将 不 
再 支持 下 6/7/8 浏览 器 。jQuery 使 用 户 能 更 方便 地 处 理 HTML 和 事件 ， 实 现 动画 效果 ， 并 
且 方 便 地 为 网 站 提供 AJAX 交互 。jQuery 还 有 一 个 比较 大 的 优势 是 ， 它 的 文档 说 明 很 全 ， 
而 且 各 种 应 用 也 说 得 很 详细 ， 同 时 还 有 许多 成 熟 的 插件 可 供 选 择 。jQuery 能 够 使 用 户 的 
HTML 页 面 保持 代码 和 HTML 内容 分 离 。 也 就 是 说 ， 不 用 再 在 HIML 里 面 插入 一 堆 JS 来 
调用 命令 了 ， 只 需要 定义 ID 即 可 。 
同时 jQuery 是 一 个 兼容 多 浏览 器 的 JavaScript 库 , 核心 理念 是 “write less, do more”( 写 
得 更 少 ， 做 得 更 多 )。jQuery 在 2006 年 1 月 由 美国 人 John Resig 在 纽约 的 barcamp 发 布 ， 
吸引 了 来 自 世界 各 地 的 众多 JavaScript 高 手 加 入 ， 由 Dave Methvin 率领 团队 进行 开发 。 如 
今 ，jQuery 已 经 成 为 最 流行 的 JavaScript 库 ， 在 世界 前 10 000 个 访问 最 多 的 网 站 中 ， 有 超 
过 55% 在 使 用 jQuery。 


3. 基于 完整 JS 代码 项 目的 二 次 开发 


互联 网 上 有 非常 多 的 开源 项 目 和 免费 代码 ， 可 以 应 用 到 网 页 设计 及 网 站 建设 的 过 程 
中 ， 它 们 可 以 帮助 我 们 减少 很 多 重复 劳动 。 

互联 网 上 有 非常 多 的 开源 项 目 托管 网 站 ,国际 上 ，GitHub 就 拥有 数 以 万 计 的 开源 项 目 
供 程序 开发 人 员 免 费 下 载 使 用 , 其 中 不 乏 大 量 的 JavaScript 及 jQuery 项 目 ; 在 国内 , JQ 酷 、 
懒 人 图 库 等 网 站 同样 共享 了 非常 多 的 免费 代码 可 以 下 载 使 用 ， 下 面 以 6.4.3 小 节 的 “寒战 2 
电影 宣传 ”网 站 为 基础 ， 增 加 一 个 图 片 轮 播 JS 特效 。 

Bootstrap 轮 播 (Carousel) 持 件 是 一 种 灵活 的 响应 式 的 向 站 点 添加 滑 块 的 方式 。 除 此 之 
外 ， 内 容 也 是 足够 灵活 的 ， 可 以 是 图 像 、 内 翌 框 架 、 视 频 或 其 他 想 要 放置 的 任何 类 型 的 内 
容 。Carousel 插件 的 安装 也 非常 简单 ， 下 面 我 们 通过 具体 实例 来 进行 安装 。 

















1) 引入 JS 代码 库 
以 Dreamweaver 打开 “寒战 2 电影 宣传 ”代码 ， 在 <head> 标 签 中 增加 如 下 代码 ， 实 现 
对 JS 代码 库 的 调用 (如 遇 代 码 库 失效 ， 可 自行 从 官网 下 载 代码 库 ， 从 本 地 调用 ): 
‘<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
2) 调用 HTML 代码 
将 如 下 代码 输入 至 <div class='navbar navbar-inverse>...</div> 标 签 后 ， 即 可 完成 HIML 
控制 代码 的 编辑 : 
<div id="myCarousel" class="carousel slide"> 
<!-- 轮 播 (Carousel) 指 标 --> 


<ol class="carousel-indicators"> 
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<li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
<li data-target="#myCarousel" data-slide-to="1"></li> 
<li data-target="#myCarousel" data-slide-to="2"></li> 
</o> 
<!-- 轮 播 (CarouseD) 项 目 --> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="images/01.jpg" alt="First slide"> 
</div> 
<div class="item"> 
<img src="images/02.jpg" alt="Second slide"> 
</div> 
<div class="item"> 
<img src="images/03.jpg" alt="Third slide"> 
</div> 
</div> 
<!-- 轮 播 (Carousel) 导 航 --> 
<a class="carousel-control left" href="#myCarousel" 
data-slide="prev">&lsaquo:</a> 
<a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo:;</a> 
</div> 


3) 插入 轮 播 导航 图 片 

如 上 述 代码 所 示 ，Carousel 项 目 需要 调用 images 文件 夹 下 名 为 01.jpg、02.jpg、03.jpg 
的 三 张 照片 作为 轮 播 导航 图 片 。 这 里 需要 我 们 在 网 站 的 本 地 目录 下 新 建 images 文件 夹 ， 并 
放 入 名 称 对 应 的 三 张 照片 作为 轮 播 导航 图 片 。 

需要 注意 的 是 , 轮 播 导航 图 片 建议 宽度 为 1200px, 高 度 不 限 , 但 是 为 了 保持 页 面 美观 ， 





高 度 需要 统一 。 整 体 效 果 如 图 6.26 所 示 。 
寒战 2 电影 宣传 









图 6.26 网 站 整体 效果 
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6.6.2 ”应 用 Dreamweaver 内 部 的 行为 


1. 行为 的 概念 


行为 主要 由 3 部 分 组 成 : 对象 、 事 件 和 动作 。 

对 象 是 行为 的 主体 ， 网 页 中 的 对 象 主要 有 文本 、 图 像 、 窗 口 等 。 

事件 是 针对 某 一 对 象 所 执行 的 特定 的 操作 。 比 如 当 鼠 标 指针 指向 超 链接 时 ， 会 生成 
onMouseOver 事件 ， 当 单 击 超 链接 时 ， 会 生成 onClick 事件 。 不 同 的 对 象 通 常会 产生 不 同 
的 事件 。 

动作 主要 由 使 用 JavaScript 编写 的 实现 特定 功能 的 代码 组 成 。 一 旦 动作 与 某 一 特定 事 
件 关联 ， 产 生 事件 的 同时 就 会 触发 相应 的 动作 ， 以 实现 特定 的 功能 。 比 如 要 在 窗口 载 入 
(onLoad) 的 过 程 中 打开 新 的 窗口 ， 可 以 将 onLoad 事件 与 打开 新 窗口 的 动作 相关 联 。 

2. Dreamweaver 内 置 的 行为 


Dreamweaver 内 置 的 行为 有 多 种 ， 可 通过 “行为 ”面板 查看 。 选 择 “ 窗 口 ”菜单 一 “ 行 
为 ”命令 ， 打开“ 行为” 面板， 如 图 6.27 所 示 。 以 下 对 几 种 常用 的 行为 进行 介绍 : 
































图 6.27 Dreamweaver 内 置 的 行为 


1) 调用 JavaScript 

(1) 在 “文档 ”窗口 中 输入 文本 “关闭 窗口 ”， 将 其 选中 ， 在 “属性 ”面板 的 “ 超 链 
接 ” 文 本 框 内 输入 “#”， 即 为 文本 添加 空 链接 。 

(2) 选中 文本 ， 然 后 单 击 “ 窗 口 ”菜单 一 “行为 ”命令 ， 打 开 “ 行 为 ”面板 ， 单 击 “ 添 
加 行为 ”按钮 国 ， 从 弹出 菜单 中 选择 “调用 JavaScript” 命 令 ， 弹 出 “调用 JavaScript” 对 
话 框 ， 输 入 要 执行 的 JavaScript 代码 : window.close0， 如 图 6.28 所 示 。 代 码 的 含义 是 关闭 
浏览 窗口 ， 单 击 “ 确 定 ” 按 钮 ， 返 回 “ 行 为 ”面板 。 如 果 要 删除 已 设置 的 某 个 行为 ， 选 中 
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行为 ， 单 击 “ 删 除 动作 ”按钮 二 。 

















[window. close Of 














图 6.28 “调用 JavaScript” 对 话 框 
(3) 在 “行为 ”面板 中 ， 选 择 事件 为 onClick( 单 击 )， 如 图 6.29(a) 所 示 。 
保存 网 页 ， 按 下 F12 键 浏览 网 页 ， 当 用 户 单 击 “ 关 闭 窗口 ”时 ， 就 会 弹出 信息 框 ， 询 
问 用 户 是 否 关闭 窗口 ， 如 图 6.29(b) 所 示 。 





























图 6.29(a) 为 对 象 选 择 事件 图 6.29(b) JavaScript 行为 的 执行 


2) 弹出 信息 

“弹出 信息 ”通常 用 于 定义 当 用 户 实施 了 某 个 事件 后 , 会 弹出 提示 信息 框 , 例如 在 【 例 
5.2】 中 ， 单 击 logo 图 标 时 ， 弹 出 问候 信息 框 。 操 作 步 又 如 下 : 

(1) 单 击 logo 图 标 , 在 “行为 ”面板 中 单 击 “ 添 加 行为 ”按钮 ， 在 弹出 菜单 中 选择 “ 弹 
出 信息 ”命令 ， 弹 出 “弹出 信息 ”对 话 框 。 在 此 输入 要 显示 的 文字 ， 然 后 单 击 “ 确 定 ” 
按钮 。 

(2) 在 “行为 ”面板 中 ， 选 择 事件 为 “onClick”。 

保存 网 页 ， 按 下 F12 键 ， 浏 览 网 页 ， 弹 出 一 个 信息 框 ， 如 图 6.30 所 示 。 























图 6.30 “弹出 信息 ”对 话 框 


3) 设置 文本 
“设置 文本 ”包括 4 项 内 容 : 设置 层 文 本 、 设 置 文本 域 文字 、 设 置 框架 文本 、 设 置 状 
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态 栏 文本 ， 分 别 可 以 为 层 、 文 本 域 、 框 架 和 状态 栏 等 对 象 添加 文本 信息 。 下 面 以 给 网 页 设 
置 状态 栏 文本 为 例 讲解 ， 操 作 步 骤 如 下 : 

(1) 单 击 “ 标 签 ”选择 栏 中 的 <body> 标 签 ， 在 “行为 ”面板 中 单 击 “添加 行为 ”按钮 ， 
在 弹出 菜单 中 选择 “设置 文本 ”一 “设置 状态 栏 文本 ”命令 ， 弹 出 “设置 状态 栏 文本 ”对 
话 框 。 在 对 话 框 中 输入 文字 “Welcome to my Website!”， 单 击 “ 确 定 ” 按 钮 ， 如 图 6.31 
所 示 。 








消息 : Welcone to my Website! 确定 
注意 - 并 非 所 有 浏览 器 都 支持 更 次 状态 栏 文本 ， 某 些 浏览 取消 
器 会 根据 用 户 首 i = 








迁 枯 雪 来 确定 是 否 光 许 直 功 能 。 





图 6.31 “设置 状态 栏 文本 ”对 话 框 


(2) 在 “行为 ”面板 中 ， 选 择 事件 为 “onLoad”。 
保存 网 页 ， 按 下 F12 键 浏览 网 页 , 在 状态 栏 处 有 一 行文 字 “Welcome to my Website!”。 


4) 打开 浏览 器 窗口 

“打开 浏览 器 窗口 ”的 功能 是 指 打开 网 页 的 同时 又 在 新 的 浏览 器 窗口 打开 指定 的 网 页 。 
用 户 可 以 自 定义 新 窗口 的 大 小 、 属 性 和 名 称 等 。 

下 面 以 打开 某 公司 网 站 首页 ， 同 时 会 弹出 “热烈 祝贺 荣获 国家 科技 进步 二 等 奖 ” 的 网 
页 为 例 讲解 ， 操 作 步 又 如 下 : 

(1) 创建 一 个 页 面 ， 在 页 面 中 输入 相应 的 网 页 元 素 。 将 网 页 命名 为 chuangkou.htm。 

(2) 打开 首页 ， 单 击 “ 文 档 ” 窗 口 左 下 角 的 <body> 标 签 ， 单 击 “ 行 为 ”面板 中 的 “ 添 
加 行为 ”按钮 ， 在 弹出 菜单 中 选择 “打开 浏览 器 窗口 ”命令 ， 弹 出 “打开 浏览 器 窗口 ”对 
话 框 ， 如 图 6.32 所 示 。 





要 显示 的 URL chuangkou. htn 
窗口 闪 度 : [450 窗口 吉 度 - [300 
属性 : 口 导航 工具 栏 ET 





图 6.32 “打开 浏览 器 窗口 ”对 话 框 


(3) 在 “要 显示 的 URL” 文 本 框 中 输入 广告 页 面 的 地 址 : chuangkou.htm。 

(4) 输入 窗口 宽度 与 高 度 值 ， 单 位 为 像素 ， 然 后 在 “属性 ”区 域 选择 要 显示 在 浏览 器 
中 的 组 成 元 素 ， 比 如 选中 “菜单 条 ”、“ 地 址 工具 栏 ”、“ 需 要 时 使 用 滚动 条 ” 复 选 框 等 。 
输入 浏览 器 窗口 名 称 “ 热 烈 祝贺 荣获 国家 科技 进步 二 等 奖 ”， 单 击 “ 确 定 ” 按 钮 。 

(5) 在 “行为 ”面板 中 ， 选 择 事件 为 onLoad。 完 成 设置 。 
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5) 使 用 jQuery 效果 

(1) 在 Dreamweaver 文档 的 “设计 ”或 “代码 ”视图 中 ， 选 择 要 对 其 应 用 jQuery 效 
果 的 元 素 。 

(2) 选择 “窗口 ”一 “行为 ”以 打开 “行为 ”面板 。 

(3) 单 击 加 号 图 标 ， 单 击 “ 效 果 ”， 然 后 单 击 所 需 效 果 ， 如 图 6.33(a) 所 示 。 





交汇 图 像 
弹出 信息 
恢复 交接 图 像 
打开 浏览 器 窗口 
疾 动 Ap 元 素 
改变 尾 性 | 
效果 ») Blind 
显示 - 隐 茂 元素 Bounce 
检查 插件 Clip 
检查 表单 Drop 
设置 文本 » Fade 
调用 JavaScript Fold 
如 等 东 单 Highlight 
跑 转 荣 单 开始 puff 
转 到 URL Pulsate 
预先 载 入 图 像 Scale 
二 到 更 多 行为 | 

- Slide 


图 6.33(a) 使 用 jQuery 效果 


(4) 随后 弹出 一 个 对 话 框 进行 效果 的 设置 ， 例 如 将 应 用 该 效果 的 目标 元 素 和 效果 的 持 
续 时 间 ， 如 图 6.33(b) 所 示 。 




















Fade 区 可 
目标 元 素 - | < 当前 选 定 内 容 > 到 
Sn 
可 见 性 : [Ride 























图 6.33(b) 设置 jQuery 效果 


若 要 添加 多 个 jQuery 效果 ， 请 重复 以 上 步骤 。 

在 选择 多 重 效果 时 ， 这 些 效 果 在 “行为 ”面板 中 按 显示 顺序 应 用 效果 。 若 要 更 改 效果 
的 顺序 ， 请 使 用 面板 顶部 的 箭头 键 。 

Dreamweaver 的 内 置 行为 还 有 很 多 ， 这 里 就 不 一 一 介绍 了 。 


6.6.3 ”推荐 制作 网 页 特效 的 软件 


1. 有 声 有 色 


本 软件 是 一 款 网 页 特效 制作 工具 。 它 集合 了 360 个 十 分 精彩 的 JavaScript 小 程序 ， 真 
正 做 到 了 与 特效 源 程序 相 融 合 ， 每 一 个 特效 制作 窗口 均 为 可 视 化 制作 界面 ， 所 有 特效 操作 
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只 需要 单 击 几 下 鼠标 就 可 以 完成 。 其 工作 界面 如 图 6.34 所 示 。 





于 [| 二 效 | 立交 | 各 和 站 | 基 了 村 | 录 新 [动态 扩 < 2| 
注意 : 此 页 “家 上 特效 ”必须 注册 后 才能 使 用 ,未 注册 版 本 羽 提供 预 物 功 能 。 
iskP 源 显 声 效 菜单 办 烽 滑动 源 变 菜单 购 标 动态 旋转 文字 





打字 提示 信息 链接 爆炸 滚动 提示 信息 WinyP 右 键 渐 显 菜单 


虚幻 转变 水 波 文字 另类 右 当 菜单 
鼠标 转动 星星 链接 多 彩 变 幻 文字 
柔 化 动态 光量 文字 渐 显 分 获 右 键 菜单 


魔 纪 文字 渐 显 水 波 放大 链接 多 和 新 变 文 字 





[io ]】 LWw ] [帮助 o ] [ 注册) ] 


图 6.34 “有声有色” 软件 界 面 











页 特效 精灵 
网 页 特效 精灵 是 一 款 网 页 特效 制作 工具 ， 包 括 可 以 自 定义 特效 (精灵 特效 ) 和 不 可 自 定 
义 特效 ， 适 合 入 门 级 和 专家 级 用 户 使 用 。 该 软件 提供 了 友好 的 界面 ， 用 户 只 要 单 击 儿 下 鼠 
标 ， 就 可 以 完成 复杂 的 特效 制作 过 程 。 其 工作 界面 如 图 6.35 所 示 。 


网 页 特效 精灵 ”AoSky.net 





里 葡 促 设置 特效 代码 网 页 工具 CD 软 冲 帮助 QD 
三 


人 
里 雪 半 外 是 一 个 杰 息 本 的 特效 ， 加 入 后 在 修 的 同 页 甬 纺 法 机 出 现 织 落 的 雪花 . 在 加 
冬季 本 ， 尖 加 可 | 多 的 网 页 上 ， 会 给 人 一 种 她 税 清 要 的 印 旭 ;秋季 ,可 以 占 营 果实 ,会 。 加 
结 人 一 种 涩 生成 车 总 夏 和 ,可 以 天 0， 会 结 人 一 种 区 消 和 可 局 。 。。 国 


本 汪汪 引 c- Prowm Flos\ 网 交加 坟 辐 六 Vinoeoslsno cif 


中 和 人数 :0 。 -范围 1 的 
:后 
延 反 时 间 : 10 2 请 根据 实际 效果 ， 选 短 趟 同 的 延迟 时 间 








图 635 “网 页 特效 精灵 ”软件 界面 


小 结 


本 章 通过 几 个 网 页 实例 的 导入 ， 介 绍 了 在 Dreamweaver 中 网 页 布局 的 其 他 方法 ， 如 表 
格 布局 、Bootstrap 响应 式 布 局 。 还 介绍 了 使 用 jQuery UI Widget 以 及 利用 JavaScript 制作 
网 页 特效 的 方法 ， 并 对 Dreamweaver CC 中 常用 的 内 置 行为 进行 了 介绍 。 
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练 习 题 
简 述 表格 在 网 页 中 的 作用 。 


上 机 实验 


1. 背景 知识 
根据 本 章 所 学 的 网 页 布局 、 行为 的 知识 , 综合 前 面 所 学 的 创建 站 点 及 编辑 网 页 的 知识 ， 
进行 网 页 不 同 排版 方式 的 练习 。 


2. 实验 准备 工作 
将 实验 素材 和 网 页 草图 发 送 到 学 生 的 主机 上 ， 以 供 学 生 参 考 使 用 。 
3. 实验 要 求 


(1) 根据 网 页 草图 1， 如 图 6.36 所 示 ， 利 用 表格 设计 网 页 布局 ， 在 单元 格 中 添加 网 页 





图 636 实验 : 表格 排版 网 页 草图 1 
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(2) 在 上 一 步 的 基础 上 ， 利 用 行为 添加 网 页 动态 效果 : 弹出 信息 和 打开 浏览 器 窗口 。 
4. 课时 安排 

上 机 实验 课时 安排 为 4 课时 。 

5. 实验 指导 


1) 利用 表格 设计 网 页 布局 

(1) 首先 创建 一 个 本 地 站 点 ， 新 建 一 个 文档 (其 余 几 个 实验 是 一 样 的 ， 这 是 必需 的 一 个 
步骤 )， 然 后 单 击 “ 属 性 ” 面板 中 的 “页 面 属 性 ”按钮 ， 弹 出 “页 面 属性 ”对 话 框 ， 单 击 “ 跟 
踪 图 像 ” 选 项 卡 ， 将 草图 导入 到 跟踪 图 像 中， 改变 透明 度 为 50% 。 

(2) 选择 “插入 ” 栏 一 “常用 ”选项 一 “表格 ”按钮 ， 插 入 3 个 表格 (上 、 中 、 下 )， 表 
格 的 宽度 与 草图 总 的 宽度 相同 , 均 为 853px, 每 一 个 表格 为 两 列 , 左 侧 单 元 格 的 宽度 为 161px， 
如 图 6.37 所 示 。 











一 个 布局 表格 ， 左 侧 插入 
一 个 布局 单元 格 


一 个 布局 表格 ， 左 侧 插入 
一 个 布局 单元 格 


一 个 布局 表格 ， 左 侧 插入 
一 个 布局 单元 格 





图 6.37 实例 : 利用 表格 布局 网 页 结构 图 
(3) 插入 网 页 元 素 。 最 后 打开 “页 面 属性 ”对 话 框 ， 删 除 跟踪 图 像 ， 保 存 网 页 。 


2) 利用 行为 添加 网 页 动态 效果 

特效 1: 弹出 信息 

(1) 单 击 网 页 中 间 的 logo 标志 ， 选 择 “ 窗 口 ” 菜 单一 “行为 ”命令 ,打开 “行为 ” 面 
板 ， 单 击 “ 行 为 ”面板 中 的 “添加 行为 ”按钮 ， 选 中 “弹出 信息 ”命令 。 在 “弹出 信息 ” 
对 话 框 中 输入 “欢迎 光临 XX 公司 ”， 单 击 “ 确 定 ”按钮 。 

(2) 在 “行为 ”面板 中 ， 选 中 事件 为 “onClick”。 

特效 2， 打开 浏览 器 窗口 。 

(1) 新 建 一 个 网 页 ， 在 网 页 中 输入 文本 ， 插 入 图 像 ， 网 页 内 容 集中 在 网 页 的 左上 部 ， 
保存 为 guanggao.htm。 

(2) 打开 用 表格 布局 的 网 页 ， 单 击 “ 文 档 ” 窗 口 左 下 角 的 <body> 标 签 ， 单 击 “ 行 为 ” 
面板 中 的 “添加 行为 ”按钮 ， 选 择 “ 打 开 浏 览 器 窗口 ”命令 。 在 “打开 浏览 器 窗口 ”对 话 
框 中 ， 输 入 网 页 地 址 guanggao htm， 定 义 窗 口 大 小 及 其 他 属性 ， 单 击 “ 确 定 ”按钮 。 

(3) 在 “行为 ”面板 中 ， 选 择 事件 为 “onLoad”。 























l 
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本 章 主 要 介绍 通过 表单 可 以 实现 浏览 器 与 服务 器 之 间 的 信息 交流 。 在 WWW 上 , 表单 


被 广泛 用 于 各 种 信息 的 收集 和 反馈 ， 如 图 7.1 所 示 的 表单 应 用 : 淘宝 会 员 登 录 。 
【本 章 学 习 目 标 】 


通过 本 章 学 习 ， 读 者 能 够 ， 
。 了 解 表 单 的 功能 与 用 途 

。 掌握 插入 表单 的 方法 

。 学 握 在 表单 中 插入 表单 对 象 的 方法 
。 利用 表单 制作 用 户 注册 网 页 





账户 登录 有 味 











图 7.1 表单 应 用 : 淘宝 会 员 登录 


7.1 实例 导 和 人 : 利用 表单 创建 用 户 信息 注册 表 


表单 是 使 网 站 实现 交互 功能 的 重要 途径 ， 通 过 表单 可 以 收集 站 点 访问 者 的 信息 。 表 单 
可 以 用 作 调 查 工 具 和 收集 客户 登录 信息 ， 也 可 用 于 制作 复杂 的 电子 商务 系统 。 
一 般 表 单 的 工作 流程 如 图 7.2 所 示 。 


包含 表单 的 | 提交 < Ge 
网 页 > 


将 处 理 信息 全 到 浏览 器 出 应 用 程序 对 表单 进行 信息 处 理 
图 72 表单 提交 后 的 处 理 流程 
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1) 访问 者 在 浏览 有 表单 的 网 页 时 ， 填 写 必需 的 信息 ， 然 后 按 下 按钮 提交 。 

2) 这 些 信息 通过 Intemet 传送 到 服务 器 上 。 

3) 服务 器 上 的 表单 处 理应 用 程序 (CGD 或 脚本 程序 (ASP、PHP) 对 数据 进行 处 理 。 

4) 数据 处 理 完毕 后 ， 服 务 器 反馈 处 理 信息 。 

从 表单 的 工作 流程 来 看 ， 表 单 的 开发 分 为 两 部 分 ， 一 是 具体 在 网 页 上 制作 的 表单 项 ， 
这 一 部 分 称 为 前 端 ， 主 要 在 Dreamweaver 中 制作 ; 另 一 部 分 是 编写 处 理 表单 信息 的 应 用 程 
序 ， 这 一 部 分 称 为 后 端 ， 如 ASP、CGI、PHP、JSP 等 。 本 章 主要 讲解 前 端的 设计 ， 后 端的 
开发 将 在 网 络 程序 开发 中 具体 介绍 。 
【 例 7.1】 利用 表单 创建 用 户 信 息 注册 表 ， 如 图 7.3 所 示 。 


ee 1 


























HH C 男 c 女 

个 人 喜好 : 三 旅游 厂 游 水 三 读书 厂 上 网 
ER 
ET | 


个 性 从 名 : -| 
特 向 其 它 网 站 的 聊天 室 : [车 讯 巩 天 室 司 
提交 取消 


图 7.3 用 户 信息 注册 表单 


本 实例 主要 涉及 以 下 知识 点 : 

1) 布局 网 页 。 

2) 创建 表单 。 

3) 在 表单 中 插入 表单 对 象 。 

4) 将 表单 信息 提交 到 网 络 管理 者 的 邮箱 。 


























72 创建 表单 


表单 相当 于 一 个 容器 ， 它 容纳 的 是 承载 数据 的 表单 对 象 ， 例 如 文本 框 、 复 选 框 等 。 
一 个 完整 的 表单 包括 两 部 分 : 表单 及 表单 对 象 ， 二 者 缺 一 不 可 。 
在 Dreamweaver CC 中 增强 了 表单 元 素 对 HIML5 的 支持 ， 在 “插入 ” 栏 或 “插入 ” 


此 
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菜单 中 的 “表单 ”选项 卡 中 新 增 了 多 个 新 的 表单 对 象 ， 分 别 是 “电子 邮件 ”、“ 密 码 ”、 
Url、Tel 和 “搜索 ”等 ， 如 图 7.4(a) 所 示 。 并 且 将 表单 元 素 插入 到 网 页 中 之 后 ， 表 单元 素 的 
“属性 ”面板 中 新 增 了 许多 新 的 属性 设置 选项 : Disabled 一 一 禁用 ; Required 一 一 必需 的 ; Auto 
Complete 一 一 自动 完成 ， Auto Focus 一 一 自动 聚焦 ，Read Only 一 一 只 读 ， 如 图 7.4(b) 所 示 。 











属性 
CC Name textfield | Class 无 -| Sze Value Tite 
| | men Place Holder 


Dosabled VRequred VIAvtoComplete Fom > Pattem Tab Index List - 
autoFoass [ReadOnly 


图 7.4(b) Dreamweaver CC 中 表单 对 象 的 新 增 属 性 





1. 插入 表单 
插入 表单 的 常用 方法 有 以 下 两 种 : 








| 
图 7.5 表单 及 表单 对 象 


在 网 页 中 出 现 一 个 红色 的 虚线 框 。 表单 的 作用 是 当 访 问 者 单 击 表单 的 “提交 ”按钮 时 ， 
浏览 器 将 表单 对 象 包含 的 数据 发 送 到 服务 器 ， 因 此 表单 对 象 必须 置 于 表单 中 。 


2. 设置 表单 属性 
单 击 “ 表 单 ” 外 框 ， 或 单 击 “ 文 档 ” 窗 口 左下 角 的 <Form> 标 签 ， 选 择 表单 。 在 “属性 ” 
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面板 中 设置 表单 属性 ， 如 图 7.6 所 示 。 












图 7.6 设置 表单 属性 


其 中 各 项 属性 的 功能 如 下 : 

1) 表单 ID: 表单 在 网 页 中 的 标识 。 

2) 动作 (Action): 指定 处 理 表 单 信息 的 服务 器 端的 应 用 程序 ， 单 击 “ 浏 览 文件 ”按钮 
查找 需要 的 应 用 程序 ， 或 者 直接 输入 应 用 程序 路 径 。 此 外 ， 也 可 以 通过 指定 电子 邮件 的 方 
式 处 理 表单 ， 例 如 在 Action 文本 框 中 输入 “mailto: 电子 邮件 地 址 ”， 则 使 用 电子 邮件 的 
方式 处 理 表 单数 据 。 

3) 方法 (Method): 设置 表单 的 提交 方式 。 提 交 方 式 有 三 种 : 默认 、POST、GET。 默 
认 值 为 POST。 

POST 与 GET 的 区 别 : 一 般 GET 方式 是 将 数据 附 在 URL 后 发 送 ， 即 所 传送 的 数据 会 
在 浏览 器 的 地 址 中 显示 出 来 ， 而 且 数据 长 度 有 限制 。POST 携带 的 数据 量 大 ， 它 是 将 表单 中 
的 数据 作为 一 个 文件 提交 的 ， 不 会 将 内 容 附 在 URL 后 ， 比 较 适 合 内 容 较 多 的 表单 。 

4) 编码 方式 (Enctype): 指定 对 提交 服务 器 进行 处 理 的 数据 使 用 MIME 编 码 类 型 ， 默 认 
设置 为 application/x-www-form-urlencode, 在 发 送 前 编码 所 有 字符 (默认 ); multipartform-data 
不 对 字符 编码 ， 在 使 用 包含 文件 上 传 控件 的 表单 时 ， 必 须 使 用 该 值 ，Textplain， 以 纯 文 本 
的 形式 传送 信息 。 








7.3 ”插入 表单 对 象 


创建 表单 后 ， 然 后 插入 表单 对 象 ， 所 有 的 表单 对 象 都 将 被 放置 在 这 个 表单 区 域 ， 即 红 
色 的 虚线 框 中 。 


7.3.1 表单 网 页 的 布局 


包含 表单 的 网 页 ， 一 般 仍 采用 表格 排版 方式 。 操 作 步 又 如 下 

1) 新 建 一 个 网 页 ， 添 加 页 面 背景 ， 插 入 一 个 表单 ， 出 现 一 个 红色 虚线 框 。 

2) 在 表单 中 ， 插 入 表格 ， 采 用 表格 排版 。 在 表格 中 ， 插 入 图 像 或 动画 ， 使 用 文本 加 以 
修饰 ， 并 用 CSS 样式 美化 网 页 ， 如 图 7.7 所 示 。 

3) 最 后 在 表格 中 插入 表单 对 象 。 
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图 7.7 在 表单 中 插入 表格 





md 


7.3.2 “插入 和 编辑 表单 对 象 

常用 的 表单 对 象 主要 有 以 下 几 种 : 

1. 文本 字段 和 文本 区 域 

文本 字段 

文本 字段 是 用 来 输入 文本 信息 的 。 
单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “文本 ” 按 包 口 ， 或 选择 “插入 ”菜单 一 “表单 ” 
选项 一 “文本 ”命令 ， 即 可 插入 一 个 “文本 ”对 象 ， 如 图 78 所 示 。 单 击 “ 文 本 ”对 象 ， 在 
“属性 ”面板 中 设置 “文本 ”的 属性 ， 如 图 79 所 示 。 




















必 性 
i Name textfield Sess 无 ~ Se Yokbe Te 9 
MaxLength Place Holder 
Dosabled Regired [JatoComplete 。 FEom ~ Patem TabiIndex Ust ~ 


口 AutoFoaus [aeadonly 





图 7.9 设置 文本 字段 的 属性 


文本 各 项 属性 的 功能 如 下 : 

1) 文本 域 (Name): 定义 文本 域 的 名 称 ， 用 来 标识 文本 的 唯一 性 。 

2) 字符 宽度 (Size): 输入 一 个 具体 的 数值 ， 用 于 显示 最 大 的 字符 数 。 默 认 文本 宽度 为 
20 个 字符 。 

3) 最 大 字符 数 (Max length): 设置 文本 字段 中 可 以 输入 的 最 大 字符 数 。 

4) 初始 值 (Value): 指定 当 表 单 首次 载 入 时 显示 在 文本 字段 中 的 值 。 

文本 区 域 

文本 区 域 也 是 用 来 输入 文本 信息 的 , 当 文 本 字段 的 类 型 选择 为 多 行 时 , 即 为 文本 区 域 。 


其 属性 与 文本 大 致 相同 。 
单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “文本 区 域 ” 按 钮 口 ， 或 选择 “插入 ”菜单 一 “ 表 


单 ” 选 项 一 “文本 区 域 ”命令 ， 即 可 插入 “文本 区 域 ”对 象 。 
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2. 复 选 框 及 复 选 框 组 

复 选 框 

复 选 框 是 指 从 一 组 选项 中 允许 选择 多 个 选项 。 操 作 步 又 如 下 : 

单 击 “ 插 入 ” 栏 一 “表单 ”选项 ~~“ 复 选 框 ”按钮 回 ， 或 选择 “插入 ”菜单 一 “表单 ” 
选项 ~~“ 复 选 框 ” 命 令 ， 即 可 插入 “ 复 选 框 ”对 象 。 

单 击 “ 复 选 框 ” 对象， 在 “属性 ”面板 中 设置 “ 复 选 框 ”的 属性 : “ 复 选 框 ”的 名 称 、 
选 定 值 、 初 始 状 态 等 ， 如 图 7.10 所 示 。 
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图 7.10 设置 复 选 框 的 属性 


复 选 框 组 

由 于 “ 复 选 框 ”通常 是 多 个 组 成 一 组 来 使 用 ， 因 此 Dreamweaver CC 提供 了 “ 复 选 杠 
组 ”的 功能 。 

单 击 “ 插 入 ” 栏 一“ 表单 ”选项 一 “ 复 选 框 组 ”按钮 国 ， 或 选择 “插入 ”菜单 一 “ 表 
单 ” 选 项 一 “ 复 选 框 组 ”命令 ， 弹 出 “ 复 选 框 组 ”对 话 框 ， 如 图 7.11 所 示 。 
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图 7.11 “ 复 选 框 组 ”对 话 框 

该 对 话 框 中 相关 参数 的 功能 如 下 : 

1) 名 称 : 定义 复 选 框 组 的 名 称 ， 用 来 标识 整 组 的 复 选 框 。 

2) 添加 十 和 删除 一 按钮 : 分 别 用 来 增加 和 删除 复 选 框 。 

3) 向 上 四 和 向 下 四 按钮 :改变 复 选 框 的 顺序 。 

4) 标签 : 定义 复 选 框 显 示 的 文本 标签 。 

5) 值 : 定义 “ 复 选 框 ”的 选 定 值 。 

6) 布局 : 选择 “换行 符 ”， 则 使 用 换行 符 来 分 开 同 一 组 中 的 复 选 框 ， 选择“ 表格 ”， 
则 会 自动 生成 一 个 表格 用 来 定位 复 选 框 。 最 后 ， 单 击 “ 确 定 ” 按 钮 。 
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3. 单 选 按钮 及 单 选 按钮 组 

单 选 按钮 

“ 单 选 按钮 ”是 指 从 一 组 选项 中 只 能 选择 一 个 选项 。 操 作 步 骤 如 下 : 
单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “ 单 选 按钮 ” 回 ， 或 选择 “插入 ”菜单 一 “表单 ”选项 
一 “ 单 选 按钮 ”命令 ， 即 可 插入 “ 单 选 按钮 ”对 象 。 

单 击 “ 单 选 按钮 ”对 象 ， 在 “属性 ”面板 中 设置 “ 单 选 按钮 ”的 属性 : “ 单 选 按钮 ” 
的 名 称 、 选 定 值 、 初 始 状态 等 ， 如 图 7.12 所 示 。 














图 7.12 ”设置 单 选 按钮 的 属性 


单 选 按钮 组 

由 于 “ 单 选 按钮 ”通常 是 多 个 组 成 一 组 来 使 用 ， 因 此 Dreamweaver CC 提供 了 “ 单 选 
按钮 组 ”的 功能 。 

单 击 “ 插 入 ” 栏 一 “表单 ”选项 ~~“ 单 选 按钮 组 ”按钮 固 ， 或 选择 “插入 ”菜单 ~“ 表 
单 ” 选 项 一 “ 单 选 按钮 组 ”命令 ， 弹 出 “ 单 选 按钮 组 ”对 话 框 ， 如 图 7.13 所 示 。 
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图 7.13 “ 单 选 按钮 组 ”对 话 框 

该 对 话 框 中 相关 参数 的 功能 与 复 选 框 组 相似 ， 这 里 不 再 一 一 叙述 。 

4. 列表 /菜单 

“列表 ”和 “菜单 ”可 以 在 有 限 的 空间 内 为 用 户 提供 更 多 的 选项 。“ 列 表 ” 在 深 动 条 
中 显示 选项 值 ， 并 允许 用 户 在 列表 中 选择 多 个 选项 。 “菜单 ” 在 下 拉 式 菜单 中 显示 选项 值 ， 
只 允许 用 户 选择 一 个 选项 。 操 作 步骤 如 下 : 

单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “选择 ”按钮 目 ， 或 选择 “插入 ”菜单 一 “表单 ” 
选项 一 “选择 ”命令 ， 即 可 插入 “列表 ”或 “菜单 ”对 象 。 

单 击 “ 列 表 /菜单 ”， 在 “属性 ”面板 中 设置 “列表 /菜单 ”的 属性 ， 如 图 7.14 所 示 。 
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图 7.14 设置 “列表 /菜单 ”的 属性 


“列表 /菜单 ”各 项 属性 的 功能 如 下 : 

1) Name: 定义 “列表 /菜单 ”的 名 称 。 

2) 初始 化 时 选 定 (Selected): 设置 首次 载 入 表单 时 ，“ 列 表 / 菜 单 ” 定 位 为 哪 一 个 选项 。 

3) 列表 值 ， 单 击 该 按钮 打开“ 列表 值 ”对 话 框 ， 如 图 7.15 所 示 。 用 光标 单 击 “ 项 
目标 签 ” 下 方 ， 输 入 列表 文本 ， 将 光标 右 移 ， 输 入 列表 值 。 单 击 加 号 按钮 十 添加 列表 项 ， 
单 击 减 号 按钮 一 删除 列表 项 , 选中 列表 项 , 单 击 向 上 四 | 或 向 下 四 按钮 改变 列表 项 的 顺序 。 
最 后 ， 单 击 “ 确 定 ”按钮 。 



































图 7.15 “列表 值 ” 对 话 框 


5. 跳 转 菜单 

“ 跳 转 菜单 ”与 “菜单 /列表 ”对 象 有 所 不 同 ， 菜 单 的 每 一 个 列表 项 都 链接 到 一 个 URL 
地 址 。 一 般 常 用 于 友情 链接 。 操 作 步 骤 如 下 : 

单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “选择 ”按钮 国 ， 单 击 “ 列 表 / 菜 单 ”， 在 “窗口 ” 
菜单 中 打开 “行为 ”面板 ， 在 “行为 ”面板 中 插入 “ 跳 转 菜单 ”， 弹 出 “ 跳 转 菜单 ”对 
话 框 ， 或 选择 “插入 ”菜单 一 “表单 ”选项 一 “选择 ”命令 ， 之 后 在 “窗口 ”菜单 中 打开 
“行为 ” 面板 ， 在 “行为 ”面板 中 插入 “ 跳 转 菜单 ”， 弹 出 “ 跳 转 菜单 ”对 话 框 ， 如 图 7.16 
所 示 。 
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图 7.16 打开 “ 跳 转 菜单 ”对 话 框 
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该 对 话 框 中 相关 参数 的 功能 如 下 

1) 首先 在 文本 框 输入 文本 , 在 “选择 时 , 转 到 URL 于 ”文本 框 中 输入 URL 链接 地 址 。 

2) 单 击 添加 按钮 十 添加 菜单 项 ， 单 击 减 号 按钮 一 删除 菜单 项 ， 单 击 向 下 四 | 或 向 上 按 
钮 巴 改 变 菜 单项 的 顺序 。 

6. 文件 域 

“文件 域 ” 的 作用 是 由 用 户 在 表单 中 选择 文件 ， 然 后 将 选中 的 文件 发 送 到 服务 器 。 例 
如 : 用 户 在 撰写 电子 邮件 时 ， 采 用 文件 域 的 方式 ， 将 文件 作为 附件 传送 如 图 7.17 所 示 。 





图 7.17 在 表单 中 上 传 附加 文件 作为 附件 

操作 步骤 : 单 击 “ 插 入 栏 ” 一 “表单 ”选项 一 “文件 ”按钮 国 ， 或 选择 “插入 ”菜单 

一 “表单 ”选项 一 “文件 ”命令 ， 即 可 插入 “文件 域 ” 对 象 。 单 击 “ 文 件 域 ”， 在 “属性 ” 
面板 中 设置 “文件 域 ”的 属性 : 文件 的 名 称 等 ， 如 图 7.18 所 示 。 
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图 7.18 设置 文件 域 的 属性 


7. 隐藏 域 

“隐藏 域 ” 通 常用 来 在 表单 之 间 传 递 数据 ， 一 般 只 用 于 脚本 编程 。 操 作 步 又 如 下 : 

单 击 “ 插 入 栏 ” 一 “表单 ”选项 一 “隐藏 ”按钮 3， 或 选择 “插入 ”菜单 一 “表单 ” 
选项 一 “隐藏 ”命令 ， 即 可 插入 “隐藏 域 ” 对 象 。 

8. 按钮 、“ 提 交 ” 按 钮 和 “ 重 置 ”按钮 

“按钮 ”的 作用 是 控制 表单 操作 。 使 用 表单 按钮 将 输入 表单 的 数据 提交 到 应 用 程序 ， 
或 者 重 置 该 表单 ， 也 可 以 用 来 执行 脚本 指定 的 自 定义 功能 。 操 作 步 骤 如 下 : 

单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “按钮 ”按钮 国 ， 或 选择 “插入 ”菜单 一“ 表单 ” 
选项 一 “按钮 ”命令 ， 即 可 插入 “按钮 ”对 象 。 单 击 “ 按 钮 ”， 在 “属性 ”面板 中 设置 按 
钮 的 属性 ， 如 图 7.19 所 示 。 
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图 7.19 设置 按钮 的 属性 
按钮 各 项 属性 的 功能 如 下 : 


1) Name: 定义 按钮 的 名 称 。 
2) Value: 显示 在 按钮 上 的 文本 。 
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此 外 还 有 “提交 ”按钮 国 “ 稚 交 " 找 和 ”和 “ 重 置 ”按钮 妃 “ 枉 "3 ，“ 提 交 ” 按 钮 的 功 
能 是 把 表单 中 的 信息 提交 到 服务 器 处 理 ， 或 提交 给 邮箱 接收 ; “ 重 置 ”按钮 的 功能 是 把 表 
单 中 的 信息 清空 ， 以 方便 浏览 者 重新 填写 。 

9. 图 像 域 

“图 像 域 ” 实 质 上 是 以 图 像 形式 显示 的 提交 按钮 ， 它 的 功能 等 同 于 提交 按钮 。 操 作 步 
又 如 下 : 

单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “图 像 按 钮 ”按钮 盖 ， 或 选择 “插入 ”菜单 一 “ 表 
单 ” 一 “图 像 按钮 ”命令 ， 即 可 插入 “图 像 域 ”对 象 。 单 击 图 像 域 ， 在 “属性 ”面板 中 设 
置 图 像 域 的 属性 ， 如 图 7.20 所 示 。 
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图 7.20 设置 图 像 域 的 属性 


图 像 域 的 各 项 属性 的 功能 如 下 : 

1) Name: 定义 图 像 域 的 名 称 。 

2) Sre: 选择 图 像 文 件 的 路 径 和 文件 名 。 

3) Alt: 输入 文本 ， 当 图 像 不 能 正常 显示 时 ， 用 文本 替代 图 像 ， 或 在 图 像 正 常 显示 时 ， 
在 鼠标 经 过 图 像 时 对 图 像 进行 文字 注释 。 


?注意 : 
定义 表单 对 象 的 名 称 时 最 好 不 要 用 中 文 和 特殊 字符 ， 而 应 与 变量 名 命名 规则 相同 。 


7.4 制作 用 户 注册 表 


本 节 讲 解 例 7.1 中 用 户 信息 注册 表 的 制作 过 程 。 插 入 一 个 表单 ， 再 插入 表单 对 象 ， 而 
浏览 者 在 浏览 本 网 页 时 ， 填 写 表单 信息 ， 然 后 将 信息 提交 到 网 络 管理 员 的 电子 邮件 地 址 。 
网 络 管理 员 通 过 电子 邮件 来 收集 网 站 浏览 者 的 信息 。 制 作 过 程 如 下 : 

1) 创建 一 个 本 地 站 点 ， 在 本 地 站 点 内 创建 一 个 文件 夹 images 用 于 存储 图 像素 材 。 

2) 创建 一 个 新 文档 ， 文 件 名 为 form.htm。 选 择 “ 修 改 ”菜单 一 “页 面 属性 ”命令 ， 弹 
出 “页 面 属性 ”对 话 框 ， 设 置 网 页 标题 为 “假日 小 镇 咖啡 语 茶 ”， 设 置 背景 图 像 为 
images/bg:jpg。 

3) 单 击 “ 插 入 ” 栏 一 “常用 ”选项 一 “图 像 ” 按 钮 ,插入 一 幅 标 志 图 像 images/01.jpg。 

4) 单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “表单 ”按钮 ， 插 入 一 个 表单 ， 出 现 一 个 红色 的 
虚线 框 , 在 “属性 ”面板 中 设置 表单 的 属性 , 在 Action 文本 框 中 输入 “mailto:abc @163.com”， 
“方法 ”选择 为 “默认 ”， 如 图 7.21 所 示 。 
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7.21 实例 中 表单 属性 的 设置 


5) 将 光标 置 于 表单 内 部 ， 插 入 表格 进行 页 面 的 布局 ， 细 节 不 再 叙述 。 输 入 文本 “假日 
小 镇 用 户 资料 注册 ”。 

6) 文本 字段 : 单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “文本 字段 ”按钮 ， 在 弹出 的 “输入 
标签 辅助 功能 属性 ”对 话 框 中 输入 ID 为 usemame， 标 签 为 登录 名 ， 在 “属性 ”面板 中 设 
置 文本 字段 的 属性 ， 类 型 为 单行 。 

7) 文本 : 插入 文本 ,标签 文字 为 “昵称 ”, 了 D 为 nicheng。 插 入 文本 ， 标 签 文字 为 “年 
龄 ”，ID 为 age。 插入 文本 ， 标 签 文字 为 E-mail，ID 为 email。 插 入 密码 ， 标 签 文字 为 “ 设 
置 密码 ”，ID 为 password( 浏 览 者 访问 本 网 页 时 ， 当 输入 文本 时 ， 不 显示 明文 ， 而 显示 为 
@@g@). 

8) 单 选 按钮 组 : 输入 文本 为 “性 别 ”， 将 光标 置 于 此 文本 后 ， 单 击 “ 插 入 ” 栏 一 “ 表 
单 ” 选 项 一 “ 单 选 按钮 组 ”按钮 。 在 “ 单 选 按钮 组 ”对 话 框 中 输入 名 称 为 sex， 输 入 “ 单 
选 按钮 项 目 ” 的 标签 和 值 ， 分 别 为 一 一 男 、 男 ， 女 、 女 。 

9) 复 选 框 组 : 输入 文本 为 “个 人 喜好 ”, 将 光标 置 于 此 文本 后 , 单 击 “插入 ” 栏 一 “ 表 
单 ” 选 项 一 “ 复 选 框 组 ”按钮 。 在 “ 复 选 框 组 ”对 话 框 中 输入 名 称 为 xihao， 输 入 “ 复 选 框 
组 ”的 标签 和 值 ， 复 选 框 的 标签 分 别 为 游泳 、 读书、 上 网 ， 选 定 值 对 应 为 游泳 、 读 书 、 
上 网 。 

10) 菜单 /列表 : 输入 文本 “请 选择 聊天 位 置 和 话题 ”， 将 光标 置 于 此 文本 后 ， 单 击 
“插入 ” 栏 一 “表单 ”选项 一 “选择 ”按钮 ， 输 入 ID 为 liaotian， 标 签 为 “选择 聊天 室 ”， 
选中 “菜单 /列表 ”对 象 ， 在 “属性 ”面板 中 设置 其 属性 ， 类 型 一 一 选择 菜单 。 单 击 “ 列 表 
值 ”按钮 ， 弹 出 “列表 值 ”对 话 框 ， 分 别 输入 项 目标 签 和 值 ， 如 图 7.22 所 示 。 

















图 7.22 实例 中 菜单 /列表 值 的 设置 


11) 菜单 /列表 : 单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “菜单 /列表 ”按钮 , 输入 ID 为 huati， 
标签 为 “交谈 话题 ”， 选 中 “菜单 /列表 ”对 象 ， 在 “属性 ”面板 中 设置 其 属性 ， 类 型 一 一 
选择 Multiple， 设 置 大 小 为 1。 单 击 “ 列 表 值 ”按钮 ， 弹 出 “列表 值 ”对话 框 ， 分 别 输入 项 
目标 签 和 值 ， 如 图 7.23 所 示 。 
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图 7.23 ”实例 中 下 拉 列表 中 列表 值 的 设置 


12) 文本 区 域 : 单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “文本 区 域 ” 按 钮 , 输入 了 D 为 qianming， 
标签 为 个 性 签名 ， 单 击 “ 文 本 区 域 ” 对 象 ， 在 “属性 ”面板 中 设置 “文本 区 域 ”的 属性 。 
13) 跳 转 菜 单 ， 输 入 文本 为 “转向 其 他 网 站 的 聊天 室 ”， 单 击 “ 择 入 ” 栏 一 “表单 ” 
选项 一 “ 跳 转 菜单 ”按钮 ， 弹 出 “ 跳 转 菜单 ”对 话 框 ， 设 置 相 关 的 参数 ， 如 图 7.24 所 示 。 





+— SE 


确定 
菜单 需 ，[ 请 民 (tt J7chat sins Co cn | 取消 
帮助 


文本 :| 及 讯 


选择 时 ， 转 到 URL: lhttp: //chat. qq. com 浏览 . 





打开 URL 于 - 主 窗口 Y 
口 更 zy URL 后 选择 第 一 个 项 目 





图 7.24 实例 中 “ 跳 转 菜 单 ”对 话 框 的 设置 


14) 按钮 : 单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “提交 按钮 ”按钮 ， 插 入 “提交 按钮 ” 
对 象 ， 再 插入 “ 重 置 按钮 ”， 值 为 “取消 ”。 

至 此 ， 包 含 表 单 的 网 页 制作 完成 ， 保 存 网 页 ， 按 下 F12 键 ， 浏 览 网 页 ， 如 图 7.3 所 示 。 
在 浏览 器 中 填写 表单 信息 ， 表 单 将 以 电子 邮件 的 方式 发 送 到 abc@163.com 这 个 邮箱 里 。 


75 验证 表单 


利用 Dreamweaver 中 “检查 表单 ”的 内 置 行为 ， 检 查 浏览 者 填写 表单 对 象 的 内 容 是 否 
符合 事先 设 定 的 要 求 。 一般 使 用 onSubmit 事件 将 检查 表单 的 行为 附加 到 表单 上 ， 当 用 户 单 
击 “ 提 交 ” 按 钮 时 ， 同 时 对 多 个 表单 对 象 进行 检查 。 

分 析 上 一 小 节 的 表单 实例 ， 为 了 防止 浏览 者 不 填 某 些 信息 或 乱 填 信息 ， 这 里 设置 登录 
名 、 电 子 邮 件 地 址 必须 填写 ， 年 龄 必须 是 数字 且 数 字 范 围 为 1 至 99， 电 子 邮 件 必须 是 电子 
邮件 的 格式 。 针 对 这 些 要 求 ， 操 作 步 又 如 下 : 

1) 选择 “窗口 ”菜单 一 “行为 ”命令 ， 打开“ 行为 ”面板 。 

2) 单 击 “文档 ”窗口 左下 角 的 <form> 标 签 ， 打 开 “ 行 为 ”面板 ， 单 击 “ 添 加 行为 ” 按 
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钮 ， 在 弹出 菜单 中 选择 “检查 表单 ”命令 ， 弹 出 “检查 表单 ”对 话 框 ， 如 图 7.25 所 示 。 














input username” (R) 
input “nicheng” 








Sinput “email” (RisEneil) 


: 口 | 必需 的 








可 接受 : 人 @ 任何 东西 〇 数字 
@ 〇 电子 邮件 地 址 〇 数字 从 | 























图 7.25 “检查 表单 ”对 话 框 





在 “检查 表单 ”对 话 框 中 ， 列 表 区 域 有 以 下 内 容 : 

文本 “usemame” 在 表单 “forml1” 中 ，“ 值 ”一 一 选中 “必需 的 ” 复 选 框 ，“ 可 接受 ” 
一 一 选中 “任何 东西 ” 单 选 按钮 。 

文本 “nicheng” 在 表单 “forml” 中 ， 

文本 “email” 在 表单 “forml1” 中 ， 
一 一 选中 “电子 邮件 地 址 ”。 

文本 “age” 在 表单 “forml1” 中 ，“ 可 接受 ”一 一 选中 “数字 从 ”1“ 到 ”99。 

3) 在 “行为 ”面板 中 ， 选 择 事件 为 onSubmit。 

保存 网 页 ， 按 下 F12 键 浏览 网 页 ， 在 表单 中 随意 输入 内 容 ， 单 击 “ 提 交 ” 按 钮 就 会 出 


现 以 下 提示 ， 如 图 7.26 所 示 。 


假日 小 镇 用 户 资料 注册 


“可 接受 ”一 选中 “任何 东西 ” 单 选 技 钥 。 
“ 值 ”一 选中 “必需 的 ” 复 选 框 ，“ 可 接受 ” 
































转向 其 它 网 站 的 聊天 室 ， | 芯 讯 中 天 室 辐 
国 ] 区 可 
图 .7.26 验证 表单 
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小 结 


本 章 通过 会 员 注册 信息 表 的 实例 讲解 ， 重 点 介绍 了 以 下 几 点 : 
1. 插入 表单 及 表单 属性 的 设置 。 

2. 在 表单 域 中 ， 插 入 表单 对 象 并 设置 表单 对 象 的 属性 。 

3. 将 表单 提交 到 管理 员 的 电子 邮箱 中 进行 处 理 。 





练 习 题 


1. 什么 是 表单 ? 简 述 表单 的 基本 工作 原理 。 
2. 表单 对 象 包括 哪些 ? 
3. 如 何 验证 表单 ? 


上 机 实验 


1. 背景 知识 


根据 本 章 所 学 的 插入 表单 、 表 单 对 象 以 及 Dreamweaver 内 置 行为 的 检验 表单 等 知识 ， 
再 结合 前 面 所 学 的 网 页 编辑 、 页 面 排版 的 知识 ， 制 作 反 馈 表 单 。 


2. 实验 准备 工作 
将 实验 素材 及 网 页 样 图 ， 发 送 到 学 生 的 主机 上 ， 以 供 学 生 参 考 使 用 。 
3. 实验 要 求 


(1) 创建 一 个 空白 表单 。 插 入 表格 ， 利 用 表格 排版 网 页 ， 并 插入 图 片 及 应 用 CSS 样式 
来 美化 网 页 。 

(2) 插入 表单 对 象 ， 并 通过 “属性 ”面板 设置 其 属性 。 

(3) 最 后 利用 Dreamweaver 内 置 行 为 验证 表单 。 

反馈 表单 的 效果 图 如 图 7.27 所 示 。 


4. 课时 安排 

上 机 实验 课时 安排 2 课时 。 

5. 实 训 指 导 

(1) 首先 创建 一 个 本 地 站 点 ， 在 本 地 站 点 中 新 建 一 个 文件 夹 images， 将 图 像素 材 保存 
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在 此 文件 夹 中 。 创 建 一 个 网 页 ， 保 存 网 页 为 biaodanhtm， 插 入 一 幅 图 像 ， 文 件 名 为 
Images/btjpg。 

(2) 单 击 “ 插 入 ” 栏 一 “表单 ”选项 一 “表单 ”按钮 ， 插 入 一 个 表单 ， 在 “文档 ” 窗 
口中 出 现 一 个 红色 的 虚线 框 ， 在 “属性 ”面板 中 ， 在 Action 文本 框 中 输入 “mailto: 电子 
BP 件 地 址 ”。 

(3) 在 虚线 框 内 单 击 ， 然 后 插入 一 个 表格 ， 采 用 表格 进行 排版 。 


您 的 职业 :， [于 于 加 
电子 邮件 : 
您 虹 喜 欢 本 出 版 社 出 版 的 时 一 本 书 :三 Dreaweaver 三 Flash cs5 三 Firevork cs5 三 Photoshop ca5 
您 看 了 书 的 效果 : 6 非 党 好 C 好 一般“ C 郑 

您 认为 最 好 的 多 媒体 技术 站 点 。 [5 二 可 习 










































































您 对 书 的 意见 : | 习 
| 
为 了 便于 您 参加 本 网 站 开展 的 各 类 活动 、 提 高 我 们 的 服务 质量 ,请 完整 填写 以 下 选 填 内 容 。 





























图 7.27 反馈 表单 的 效果 图 


(4) 插入 一 个 “文本 ”对 象 ， 输 入 标签 文字 为 “您 的 姓名 ”， 选 中 “文本 ”对 象 ， 在 
“属性 ”面板 中 设置 文本 字段 的 属性 。 

(5) 同 理 继续 插入 单 选 按钮 组 、 复 选 框 组 、 滚 动 列 表 、 下 拉 菜 单 、 文 本 域 等 ， 并 设置 
其 属性 ， 然 后 插入 “提交 ”按钮 和 “ 重 置 ”按钮 。 

(6) 选中 文档 窗口 中 左下 角 的 <form> 标 签 ， 选 择 “窗口 ”菜单 一 “行为 ”命令 ， 打 开 
“行为 ”面板 ， 添 加 “检查 表单 ”行为 ， 然 后 设置 姓名 和 E-mail 地 址 为 必需 的 ，E-mail 地 
址 按照 E-mail 格式 填写 。 

(7) 保存 网 页 ， 按 下 F12 键 并 浏览 网 页 。 











第 8 章 ”模板 与 库 的 应 用 


利用 模板 和 库 设计 风格 一 致 的 网 站 ， 使 用 模板 和 库 的 组 合 使 得 网 站 建设 和 维护 变 得 很 
轻松 ， 尤 其 在 对 一 个 规模 较 大 的 网 站 进行 建设 与 维护 时 ， 就 会 体会 到 模板 和 库 的 好 处 。 
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【本 章 学 习 目 标 】 
通过 本 章 学 习 ， 读 者 能 够 : 
e 掌握 模板 的 创建 与 编辑 
e 掌握 模板 的 应 用 与 更 新 
e。 了 解 如 何 应 用 库 


8.1 实例 导 人 : 利用 模板 生成 站 点 


个 成 功 的 网 站 首先 要 具备 自己 独特 的 风格 ， 才 能 够 在 浩 如 大 海 的 网 络 中 脱颖而出 ， 
给 人 留 下 深刻 的 印象 。 但 仅 赁 网 站 中 的 一 两 个 较 好 的 页 面 ， 很 难 收 到 良好 的 效果 。 因 此 就 
需要 整个 站 点 内 的 页 面体 现 出 统一 的 风格 。 通 过 使 用 模板 能 够 生成 多 个 具有 相似 结构 和 外 
观 的 网 页 ， 从 而 提高 网 页 制作 效率 。 
【 例 8.1】 利用 模板 和 库 技术 生成 网 站 实例 ， 如 图 8.1 所 示 。 


地 址 : 陕西 省 西安 市 着 源 区 津 吉 路 月 星 家 层 3F 


图 8.1 利用 模板 生成 的 网 站 效果 图 





。122 。 网 站 规划 与 网 页 设计 (第 二 版 ) 


本 网 站 实例 主要 涉及 以 下 知识 点 : 

1) 网 页 版 面 布 局 的 设计 。 

2) 划分 模板 锁定 区 域 和 可 编辑 区 域 。 

3) 创建 模板 和 编辑 模板 ， 最 后 根据 模板 快速 创建 网 页 。 








8.2 ”模板 的 创建 和 编辑 


关于 模板 最 显著 的 特征 就 是 存在 锁定 区 域 和 可 编辑 区 域 之 分 。 锁 定 区 域 主要 用 来 锁定 
体现 网 站 风格 的 部 分 ， 而 将 经 常 要 改变 的 文字 、 图 像 、 链 接 等 网 页 元 素 设置 成 可 编辑 区 域 。 
网 页 中 只 编辑 可 编辑 区 域 的 内 容 ， 从 而 得 到 与 模板 相似 ， 但 又 有 所 不 同 的 新 的 网 页 。 


8.2.1 创建 模板 
创建 模板 有 两 种 常用 的 方法 : 一 是 创建 新 模板 ， 二 是 将 当前 网 页 另存 为 模板 。 
1. 创建 新 模板 


方法 一 :选择 “文件 ”菜单 一 “新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 选 择 “ 空 白 
页 ”选项 一 选择 “页 面 类 型 ”中 的 “HTML 模板 ”选项 一 选择 “布局 ”中 的 某 项 ， 单 击 “ 创 
建 ” 按 钮 ， 如 图 8.2 所 示 。 

方法 二 : 选择 “窗口 ”菜单 一 “资源 ”命令 ， 打 开 “ 资 源 ” 面 板 ， 单 击 “ 资 源 ” 
面板 左边 的 “模板 ”按钮 ， 单 击 右 下 角 的 “新 建 模板 ”按钮 葵 ， 如 图 8.3 所 示 。 













































[IE 
i a 
MO ae 模板 
RHR 析 = 这 是 一 个 空 模板 。 
车 要 开始 ， 点 击 全 编辑 按钮 ， 玉 加 内 在 并 使 
Deemer 异 折 六 位 = 用 修改 菜单 将 一 些 区 域 标记 为 可 编辑 
1EB /Tenplates/intit 
文 桂 夫 3 ms 
Tr 
I cs 六 了 - 
C7 TOC ET 
图 8.2 “新 建文 档 ” 对 话 框 图 8.3 利用 “资源 ”面板 创建 模板 


2. 将 当前 文档 另存 为 模板 


将 一 个 编辑 好 的 网 页 按照 要 求 加 以 修改 ， 然 后 另存 为 模板 。 操 作 步骤 如 下 : 
1) 保留 与 其 他 网 页 相同 的 结构 和 内 容 ， 删 除 不 需要 与 其 他 网 页 共享 的 内 容 , 插入 “可 
编辑 区 域 ”。 


2) 选择 “文件 ” 荣 单 ~“ 另 存 模板 ” 命令， 弹出 “另存 模板 ”对 话 框 ， 如 图 84 所 示 。 
或 者 单 击 “ 插 入 ” 栏 一 “模板 ”选项 一 “创建 模板 ”按钮 ， 如 图 8.5 所 示 ， 弹 出 “另存 模 
板 ” 对 话 框 。 输 入 模板 名 称 ， 单 击 “ 保 存 ” 按 钮 。 





























图 8.4 “另存 模板 ”对 话 框 图 8.5 利用 “插入 ” 栏 创建 模板 


8.2.2 ”编辑 模板 


首先 划分 可 编辑 区 域 和 锁定 区 域 ， 然 后 编辑 模板 ， 通 常 是 像 编 辑 网 页 一 样 先 将 锁定 区 
域 编辑 好 ， 然 后 定义 可 编辑 区 域 ， 如 图 8.6 所 示 。 





图 8.6 编辑 模板 


可 编辑 区 域 ， 在 模板 中 可 编辑 区 域 对 应 网 页 中 的 可 编辑 部 分 ， 锁 定 区 域 是 那些 不 可 编 
辑 的 部 分 。 在 默认 方式 下 ，Dreamweaver 将 新 模板 的 所 有 部 分 设置 为 不 可 编辑 区 域 ， 由 用 
户 来 定义 可 编辑 区 域 。 在 编辑 模板 时 , 无 论 是 可 编辑 区 域 还 是 锁定 区 域 , 都 是 可 以 编辑 的 。 
但 是 将 模板 应 用 到 网 页 中 ， 在 网 页 中 的 锁定 区 域 是 不 可 以 编辑 的 。 定 义 可 编辑 区 域 的 常用 
方法 有 两 种 。 方 法 一 : 在 模板 中 将 光标 定位 到 要 新 建 可 编辑 区 域 的 位 置 ， 选 择 “ 插 入 ” 
菜单 一 “模板 ” 选项 一 “可 编辑 区 域 ”命令 。 方 法 二 : 单 击 “插入 ” 栏 一 “模板 ”选项 一 
“可 编辑 区 域 ”按钮 。 > “新 建 可 编辑 区 域 ”对 话 框 ， 如 图 8.7 所 示 ， 输 入 这 个 区 域 的 名 
称 ， 单 击 “ 确 定 ” 按 
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名 称 - 





此 区 域 插 可 以 在 草 于 该 模板 的 文档 
中 进行 编辑 。 





图 8.7 “新 建 可 编辑 区 域 ”对 话 框 


Dreamweaver 会 将 这 个 区 域 用 高 亮 边 框 的 矩形 包围 起 来 ， 同 时 在 矩形 的 左上 角 显 示 这 
个 可 编辑 区 域 的 名 称 ， 如 图 8.6 所 示 。 创 建 模板 后 ， 本 地 站 点 会 自动 创建 文件 夹 templates， 


模板 的 默认 路 径 就 是 此 文件 夹 ， 模 板 的 后 缀 名 为 dwt。 


8.3 模板 的 应 用 和 更 新 


在 网 站 建设 中 ， 可 以 为 网 站 设计 几 套 不 同 的 模板 ， 为 网 站 的 风格 提供 不 同 的 方案 ， 这 


样 也 可 以 不 定期 地 改变 网 站 的 风格 ， 提 高 网 站 的 吸收 力 。 
8.3.1 模板 的 应 用 


利用 模板 快速 生成 新 的 网 页 ， 也 可 以 将 模板 应 用 于 己 有 的 网 页 。 


1. 模板 的 应 用 


选择 “文件 ”菜单 一 “新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 选 择 “ 网 
项 卡 ， 单 击 左 侧 列表 框 中 的 站 点 名 称 ， 再 单 击 右 侧 的 模板 文件 ， 选 中 “ 当 模 板 改变 时 更 新 





























.8 所 示 。 











页 面 ” 复 选 框 ， 然 后 单 击 “ 创 建 ” 按 钮 ， 实 现 通 过 模板 快速 创建 网 页 ， 如 图 8 
| ”es 
站 5 站 上 "wyvebr 罗 入 棉 | 
DD sem Ee ba 
[六 kR 布 局 
[EE 
a 
| 
图 8.8 “新 建 模 板 ” 对 话 框 
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2. 将 模板 应 用 于 当前 网 页 


方法 一 : 选择 “窗口 ”菜单 ~ “资源” 命令， 打开 “资源 ”面板 ， 在 “资源 ”面板 中 
选中 要 插入 的 模板 ， 单 击 “ 应 用 ”按钮 ， 或 直接 拖 动 模板 到 页 而 中 ， 如 疼 8.9 所 示 。 

方法 二 :选择 “修改 ”菜单 一 “模板 ”选项 一 “应 用 模板 到 页 ”命令 。 

如 果 横 板 与 当前 文档 出 现 不 匹配 的 情况 弹出“ 不一致 的 区 域名 称 "对 话 框 , 如 图 8.10 
所 示 ， 选 中 可 编辑 区 域 的 名 称 ， 在 “将 内 容 移 到 新 区 域 ”下 拉 列 表 中 ， 设 置 移动 或 丢弃 不 
匹配 区 域 。 











此 文档 中 的 某 些 区 域 在 新 模板 中 没有 相应 区 域 。 


加 
EE 
GD 
| 
已 
[un] 














图 8.9 在 “资源 ”面板 中 选择 应 用 模板 图 8.10 解析 不 匹配 区 域 


3. 当前 网 页 不 再 使 用 模板 

当 不 再 需要 对 一 个 网 页 使 用 模板 时 ， 选 择 “ 修 改 ” 菜 单一 “模板 ”选项 一 “从 模板 中 
分 离 ”命令 ， 将 网 页 和 与 之 关联 的 模板 文件 脱离 。 脱 离 之 后 的 网 页 将 变 成 普通 网 页 ， 不 再 
有 可 编辑 区 域 和 锁定 区 域 之 分 。 


8.3.2 更 新 模板 


1. 修改 模板 


创建 模板 后 ， 用 户 利用 模板 生成 了 网 页 文件 。 在 网 页 文件 的 编辑 过 程 中 可 能 会 有 一 些 
不 合适 的 地 方 ， 比 如 链接 有 错误 、 网 页 布局 中 单元 格 对 齐 方式 不 合理 、 图 像 不 能 正常 显示 
等 ， 而 对 于 锁定 区 域 是 无 法 在 网 页 编辑 状态 进行 修改 的 ， 因 此 需要 对 模板 进行 修改 。 

打开 模板 文件 ， 对 模板 文件 进行 修改 ， 针 对 在 网 页 编辑 中 发 现 的 问题 对 模板 文件 进行 
修改 。 
1) 修改 模板 : 对 锁定 区 域 进行 修改 。 
2) 删除 多 余 可 编辑 区 域 ， 在 模板 编辑 状态 ， 选 中 已 定 义 的 可 编辑 区 域 ， 选 择 “ 修 改 ” 
菜单 一 “模板 ”选项 一 “删除 模板 标记 ”命令 ， 该 可 编辑 区 域 就 不 存在 了 。 
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2. 用 模板 更 新 网 页 和 网 站 


一 旦 模板 被 应 用 到 多 个 网 页 文档 中 ， 对 此 模板 的 修改 就 会 更 新 与 其 相关 联 的 全 部 文 
档 。 这 种 使 用 模板 更 新 文件 的 方法 大 大 节省 了 用 户 的 时 间 ， 尤 其 在 涉及 大 量 的 改动 时 极为 
有 效 。 

1) 用 模板 更 新 整个 网 站 和 与 之 关联 的 所 有 网 页 

当 修 改 了 模板 后 ， 选 择 “ 修 改 ” 菜 单一 “模板 ”选项 一 “更 新 页 面 ”命令 ,或 当 用 
户 保存 模板 时 ，Dreamweaver 会 提示 用 户 是 否 使 用 模板 更 新 网 站 ， 更 新 整个 网 站 和 所 有 
网 页 。 弹 出 “更 新 模板 文件 ”对 话 框 ， 如 图 8.11 所 示 。 单 击 “ 更 新 ”按钮 ， 又 弹出 “更 
新 页 面 ”对 话 框 ， 如 图 8.12 所 示 ， 选 择 “ 查 看 ”下 拉 列 表 中 的 “整个 站 点 ”选项 ， 并 在 
右 侧 的 下 拉 列 表 中 选择 网 站 名 称 ， 单 击 “ 开 始 ” 按 钮 ， 则 对 整个 网 站 进行 更 新 。 



































要 基于 此 模板 更 新 所 有 文件 吗 ? 
2.htnl 














图 8.11 “更 新 模板 文件 ”对 话 框 


查看 (I); 整个 站 点 
更 新 : 门 库 项 目 (L) 





回 模板 (T) 
Web Fonts script tag 
口 显示 记录 (0 
状态 : 





图 8.12 “更 新 页 面 ” 对 话 框 


2) 用 模板 更 新 一 个 单独 的 网 页 
打开 要 更 新 的 网 页 ， 选 择 “ 修 改 ” 菜 单一 “模板 ”选项 一 “更 新 当前 页 ”命令 。 





8.4 使 用 库 


Dreamweaver 中 提供 了 库 的 概念 。 库 是 用 来 存储 想 要 在 整个 网 站 上 经 常 重复 使 用 或 更 
新 的 网 页 元 素 ， 其 他 网 页 可 调用 库 文件 。 这 样 一 旦 需要 修改 重复 使 用 的 部 分 ， 只 需要 修改 
库 文件 ， 而 调用 此 库 的 其 他 页 面 将 会 被 全 部 更 新 。 


8.4.1 创建 库 
库 项 目 可 以 包含 多 种 网 页 元 素 ， 如 图 像 、 链 接 、 表 格 、 脚 本 等 ， 但 CSS 样式 表 文 件 不 
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能 作为 库 项 目 添加 到 库 中 。 
创建 库 的 常用 方法 有 两 种 。 
方法 一 :选择 “窗口 ”菜单 一 “资源 ”命令 ,打开 “资源 ”面板 ， 单 击 “ 库 ”按钮 ， 
二 “资源 ”面板 下 方 的 “新 建 库 项 目 ” 按 钮 ， 如 图 8.13 所 示 。 
方法 二 : 将 已 经 编辑 好 的 网 页 元 素 转换 为 库 项 目 。 首 先 选 中 要 转换 为 库 项 目的 网 页 元 
素 ， 然 后 选择 “修改 ”菜单 一 “ 库 ” 选 项 一 “增加 对 象 到 库 ” 命 令 ， 当 前 选中 的 网 页 元 素 
就 会 成 为 一 个 新 的 库 项 目 以 供 其 他 网 页 调用 。 

创建 库 项 目 后 ， 站 点 中 就 会 多 出 子 文件 夹 library， 库 文件 的 默认 存储 路 径 就 是 该 文件 
夹 。 库 项 目的 后 级 名 为 lbi， 库 项 目的 编辑 与 普通 网 页 的 编辑 完全 相同 。 
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插入 @ 六 By 侍 
图 8.13 在 “资源 ”面板 中 新 建 库 项 目 











8.4.2 应 用 库 


库 建 立 好 后 ， 可 以 很 轻松 地 将 库 应 用 于 网 页 文件 中 。 操 作 步 骤 如 下 : 

1) 打开 模板 或 网 页 ， 把 光标 定位 到 需要 插入 库 的 位 置 。 

2) 在 “资源 ”面板 中 选择 “ 库 ” 选 项 ， 然 后 单 击 相应 的 库 项 目 ， 单 击 “ 插 入 ”按钮 ， 
或 者 将 库 项 目 直接 拖 到 网 页 上 需要 插入 库 的 位 置 。 

将 库 项 目 应 用 到 模板 或 网 页 文件 中 后 ， 在 Dreamweaver 的 网 页 编辑 状态 ， 库 项 目的 背 


景 呈 高 亮 显 示 。 
8.4.3 ”修改 库 


库 被 应 用 到 模板 或 网 页 文档 中 之 后 ， 在 模板 或 网 页 中 是 无 法 修改 的 。 要 修改 库 ， 必 须 
首先 打开 库 项 目 才能 进行 编辑 。 对 库 的 修改 则 会 自动 更 新 与 之 关联 的 所 有 网 页 文档 。 
1. 编辑 库 


打开 “资源 ”面板 ， 选 中 “ 库 ” 选 项 ， 双 击 某 个 库 项 目 ， 进 入 库 项 目的 编辑 状态 ， 对 
库 项 目 进行 修改 。 
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将 库 项 目 修改 完毕 ， 保 存 库 文件 。 弹 出 “更 新 库 项 目 ” 对 话 框 ， 单 击 “ 更 新 ”按钮 ， 
如 图 8.14 所 示 ， 或 选择 “修改 ”菜单 一 “ 库 ” 选 项 一 “更 新 ”页 面 ， 有 如 下 两 种 情况 : 


更 新 这 些 文件 的 库 项 目 吗 ? 
TemplatesVlUntitled dwt 














图 8.14 “更 新 库 项 目 ” 对 话 框 
1) 更 新 本 地 站 点 上 所 有 调用 过 库 项 目的 文档 。 
选择 “查看 ”下 拉 列 表 中 的 “整个 站 点 ”， 并 在 右 侧 的 下 拉 列 表 中 选择 网 站 名 称 ， 单 
击 “ 开 始 ” 按 钮 ， 则 对 整个 网 站 进行 更 新 ， 如 图 8.15 所 示 。 


加 更 新 页 面 ee 
查看 (I) ;整个 站 点 v | myweb v 开始 (S) 
更 新 : [四 库 项 目 (L) 关闭 (C) 
口 模板 (T) 部 助 
Web Fonts script tag 
口 显 示 记录 (0) 完成 
状态 : 


图 8.15 更 新 整个 站 点 中 调用 库 项 目的 网 页 
2) 仅 更 新 当前 正在 编辑 的 网 页 。 
选择 “查看 ”下 拉 列 表 中 的 “文件 使 用 ”， 单 击 “ 开 始 ” 按 钮 ， 如 图 8.16 所 示 ， 或 选 
择 “ 修 改 ” 菜 单一 “ 库 ” 选 项 一 “更 新 当前 页 ”命令 。 


国 更 新 页 面 = 
查看 (I):; 文件 使 用 vlpie.1bi ~ 开始 (S) | 
更 新 : 回 库 项 目 (L) 关闭 (c) | 
口 模板 (7) 部 助 | 
Web Fonts script tag 
口 显示 记录 (0 
状态 


图 8.16 更 新 当前 页 


2. 删除 库 


打开 “资源 ”面板 ， 选 中 “ 库 ” 选 项 ， 单 击 库 项 目 名 ， 按 下 Del 键 即 可 。 删 除 库 后 ， 
不 会 改变 调用 此 库 的 任何 其 他 模板 或 网 页 内 容 。 


3. 使 模板 或 网 页 中 的 库 项 目 可 编辑 


如 果 在 网 页 中 添加 了 库 项 目 ， 则 库 项 目 以 高 亮 显示 ， 无 法 编辑 。 如 果 要 在 网 页 中 编辑 
库 项 目 包含 的 内 容 ， 则 必须 断 开 当前 网 页 与 库 之 间 的 关联 。 操 作 步 骤 如 下 : 
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在 当前 网 页 中 选中 库 项 目 ， 在 “属性 ”面板 中 单 击 “ 从 源 文件 中 分 离 ” 按 钮 。 此 时 库 








项 目 不 再 以 高 亮 显示 ， 并 且 原 始 的 库 项 目 已 更 改 ， 它 不 会 再 更 新 ， 如 图 8.17 所 示 。 
层 性 
12 库 项 目 源 宫 /Library/pie. lti 打开 i 


图 8.17 网 页 中 调用 的 库 项 目 与 库 分 离 


8.5 ”利用 模板 和 库 生 成 站 点 的 制作 过 程 


本 节 讲 解 如 何 利 用 模板 和 库 快速 创建 例 8.1 中 的 网 站 实例 。 制 作 过 程 如 下 : 

1) 创建 本 地 站 点 www， 在 站 点 内 新 建文 件 夹 images， 用 于 存储 图 像素 材 。 

2) 选择 “文件 ”菜单 一 “新 建 ” 命 令 ， 在 “新 建文 档 ” 对 话 框 中 ， 选 择 “ 空 白 页 ” 选 
项 一 “页 面 类 型 ”中 的 “HTML 模板 ”一 (布局 )“ 无 ”选项 命令 ， 单 击 “ 创 建 ”按钮 。 

3) 编辑 模板 页 面 , 编辑 的 方法 与 普通 网 页 无 异 。 采用 CSS+DIV 方式 进行 页 面 的 布局 ， 
页 面 布 局 的 宽度 为 1000 像素 。 

4) 插入 一 个 总 的 DIV， 命名 为 al， 宽度 设置 为 1000 像素 ; 在 其 中 插入 多 个 DIV， 
是 名 为 al 的 DIV; 二 是 名 为 a2 的 DIV， 插 入 导航 图 形 并 设置 热点 链接 ， 三 是 插入 名 为 a3 
的 DIV， 背 景 为 棕色 (#521F01)， 输 入 一 段 文本 ; 四 是 插入 名 为 a4 的 DIV， 并 设置 背景 图 
像 ， 以 上 al、a2、a3、a4 的 宽度 均 为 1000 像素 。 

5) 将 光标 放 在 名 为 a3 的 DIV 中， 选择 “插入 ”菜单 一 “模板 对 象 ” 选 项 一 “可 编辑 
区 域 ” 命 令 ， 弹 出 “新 建 可 编辑 区 域 ”对 话 框 ， 输 入 可 编辑 区 域 的 名 称 ， 单 击 “ 确 定 ” 按 
钮 。 最 后 命名 并 保存 模板 ， 模 板 名 称 为 01.dwt。 

6) 利用 模板 快速 生成 网 页 。 选 择 “ 文 件 ” 菜 单一 “新 建 ”命令 ， 在 “新 建文 档 ” 对 话 
框 中 ， 选 择 “ 网 站 模板 ”选项 卡 ， 选 择 站 点 名 称 和 模板 名 称 ， 选 中 “ 当 模 板 改变 时 更 新 页 
面 ” 复 选 框 ， 单 击 “ 创 建 ” 按 钮 。 

7) 对 可 编辑 区 域 进行 编辑 ， 输 入 文本 、 插 入 图 像 等 ， 保 存 网 页 ， 如 图 8.18 所 示 。 

8) 预览 网 页 ， 分 析 网 页 中 存在 的 问题 ， 然 后 修改 模板 : 网 页 布局 、 网 页 美化 、 网 页 的 
链接 等 。 添加 DIV 的 背景 图 像 ， 添 加 导航 文本 的 超 链接 , 在 最 下 方 添加 名 为 down 的 DIV， 
插入 公司 的 名 称 和 地 址 等 。 

9) 保存 模板 时 ，Dreamweaver 会 提示 用 户 是 否 更 新 模板 文件 ， 弹 出 “更 新 模板 文件 ” 
对 话 框 ， 单 击 “ 更 新 ”按钮 ， 继 而 弹出 “更 新 页 面 ”对 话 框 ， 更 新 完成 后 ， 单 击 “ 关 闭 ” 
按钮 。 

10) 在 多 个 页 面 中 添加 一 张 公司 新 闻 图 片 ， 此 新 闻 图 片 会 经 常 变动 ， 最 好 的 办 法 是 将 
此 部 分 内 容 创 建 为 一 个 库 项 目 。 打 开 “ 资 源 ” 面 板 ， 选 择 “ 库 ”选项 ， 单 击 “ 资 源 ” 面 板 
下 方 的 “新 建 库 项 目 ” 按 钮 ， 命 名 库 项 目 ， 双 击 库 名 称 ， 进 入 库 的 编辑 状态 ， 插 入 一 幅 图 
像 ， 保 存 库 项 目 。 
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迪 诺 雅 简介 
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图 8.18 利用 了 模板 的 正在 编辑 的 网 页 


11) 将 库 项 目 与 模板 相 结合 应 用 到 网 页 中 。 在 网 页 中 综合 使 用 模板 和 库 将 大 大 减轻 网 
站 设计 中 重复 的 工作 量 。 打 开 模 板 ， 将 光标 定位 于 名 为 al 的 DIV 的 文本 下 方 ， 打 开 “ 资 
源 ”面板 ， 选 择 “ 库 ”选项 ， 单 击 库 项 目 ， 拖 动 到 页 面 的 最 下 方 。 此 时 库 就 被 应 用 于 模板 
了 ， 如 图 8.19 所 示 ， 将 库 项 目 与 模板 相 结合 。 
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图 8.19 将 库 项 目 与 模板 相 结合 
12) 保存 模板 时 , Dreamweaver 会 提示 用 户 是 否 更 新 模板 文件 , 弹出 “更 新 模板 页 面 
对 话 框 ， 单 击 更 新 页 面 ， 继 而 弹出 “更 新 页 面 ”对 话 框 ， 更 新 完成 ， 关 闭 对 话 框 。 
同 理 ， 利 用 模板 创建 站 点 中 的 其 他 页 面 。 
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小 结 


1. 模板 ;创建 模板 ， 编 辑 模板 ， 利 用 模板 快速 创建 网 页 。 
2. 库 : 将 多 个 网 页 重复 使 用 的 网 页 元 素 存储 到 库 项 目 中 。 


练 习 题 


1. 什么 是 模板 ? 在 Dreamweaver 中 如 何 使 用 模板 ? 
2. 如 何 将 库 项 目 从 源 文件 中 分 离 ? 
3. 模板 和 库 的 区 别 是 什么 ? 


上 机 实验 


1. 背景 知识 

根据 本 章 所 学 的 模板 和 库 的 知识 ， 并 结合 前 面 所 学 的 网 页 编辑 、 网 页 排版 技术 ， 进 行 
网 站 设计 与 制作 。 

2. 实验 准备 工作 

将 网 站 的 页 面 草图 和 素材 资料 准备 好 ， 发 送 到 学 生 主机 ， 以 供 学 生 参 考 使 用 。 

3. 实验 要 求 

1) 利用 模板 创建 站 点 

要 求 : 根据 给 定 的 网 页 素材 ， 结 合 网 页 草图 ， 创 建 和 编辑 模板 ， 并 利用 模板 快速 生成 
相同 风格 、 相 似 结构 的 网 站 。 

2) 在 网 页 中 添加 库 项 目 

要 求 : 在 上 一 个 实验 的 基础 上 ， 结 合 库 项 目的 独特 优势 ， 将 多 个 网 页 中 重复 使 用 的 网 
页 元 素 存 储 为 一 个 文件 ， 即 库 项 目 ， 然 后 在 其 他 需要 调用 的 网 页 或 模板 中 调用 ， 从 而 达到 
提高 网 页 设计 的 效率 ， 如 图 8.20 所 示 。 
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图 8.20 ”利用 模板 和 库 生成 的 网 页 





4. 课时 安排 
上 机 实验 课时 安排 2 课时 。 
5. 实验 指导 


1) 利用 模板 创建 站 点 

(1) 首先 根据 草图 进行 网 站 结构 分 析 。 本 网 站 中 多 个 网 页 的 网 站 风格 是 保持 一 致 的 ， 
在 最 上 方 是 公司 的 标志 (Logo); 第 二 行 左 侧 是 导航 ， 右 侧 是 每 一 个 网 页 的 主体 内 容 (设置 为 
可 编辑 区 域 ); 第 三 行 是 广告 横幅 (设置 为 可 编辑 区 域 ， 用 于 插入 库 项 目 )， 最 下 方 是 版 权 
信息 。 

(2) 打开 “资源 ”面板 ， 单 击 “ 模 板 ” 选 项 ， 单 击 “ 创 建 模板 ”按钮 ， 命 名 模板 。 双 
击 模板 名 称 ， 进 入 模板 编辑 状态 ， 模 板 的 编辑 与 网 页 完全 相同 ， 采 用 表格 或 CSS+DIV 排 
版 的 方式 建立 模板 结构 。 

(3) 根据 模板 创建 网 页 ， 编 辑 右 侧 的 可 编辑 区 域 ， 输 入 公司 简介 的 相关 信息 和 插入 图 
像 ， 将 网 页 保存 为 abouthtm， 保 存 路 径 为 根 文 件 夹 。 
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(4) 同 理 ， 建 立 另 外 几 个 页 面 ， 分 别 为 用 户 注 册 、 度 假 景点 等 ， 保 存 为 about01.htm、 
about02.htm。 


2) 添加 库 项 目 

(1) 首先 分 析 前 一 个 实验 项 目 根据 模板 制作 的 网 页 是 不 完善 的 ， 第 三 行 的 广告 横幅 由 

(2) 新 建 库 项 目 ， 进 行 编 辑 ， 插 入 企业 广告 宣传 横幅 ， 保 存 库 项 目 为 bt.lbi。 

(3) 应 用 库 项 目 。 打 开 前 一 个 实验 要 求 所 建立 的 模板 ， 将 光标 放 在 左 侧 单元 格 的 可 编 
辑 区 域 ， 打 开 “ 资 源 ” 面 板 ， 单 击 “ 库 ”选项 ， 选 中 bt.lbi， 单 击 “ 插 入 ”按钮 ， 将 库 应 用 
于 模板 。 

(4) 保存 该 模板 ， 此 时 会 有 一 个 更 新 提示 ， 单 击 “ 更 新 ”按钮 ， 又 会 出 现 一 个 更 新 页 
面 的 对 话 框 ， 更 新 完成 ， 关 闭 对 话 框 。 
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本 章 首先 介绍 平面 设计 基础 理论 ， 如 图 像 类 型 、 图 像 分 辨 率 、 图 像 文 件 格式 、 图 像 设 
计 的 分 类 等 ， 接 着 介绍 色彩 模式 和 网 页 配色 方案 ， 最 后 通过 一 个 房地产 实例 ， 详 细 介 绍 如 
何 进行 网 页 设计 。 


【本 章 学 习 目 标 】 

通过 本 章 学 习 ， 读 者 能 够 : 

e 了 解 平面 设计 基础 理论 : 图 像 类 型 、 图 像 分 辨 率 、 图 像 文 件 格式 、 图 像 设计 的 分 
类 等 

e 掌握 色彩 的 应 用 :色彩 模式 ， 如 何 进行 网 页 配色 

。 掌握 网 页 的 构图 : 构图 目的 、 构 图 性 质 、 构 图 的 视觉 表现 形式 

。 掌握 网 页 设计 的 工作 流程 


9.1 平面 设计 基础 


平面 设计 是 一 切 设计 的 基础 ， 符 合 现代 社会 的 需求 ， 它 能 将 视觉 设计 轻松 融 于 生活 ， 
在 设计 理念 和 组 织 形式 上 ， 具 有 创意 、 设 计 、 制 作 三 合 一 的 特点 。 


9.1.1 图 像 类 型 


1. 矢量 图 

矢量 图 是 用 线条 和 填充 色 等 数学 信息 来 描述 图 形 的 ， 一 般 矢量 格式 的 文件 通常 比较 
小 ， 对 矢量 图 进行 操作 ， 改 变 图 形 尺 寸 、 形 状 等 ， 不 会 改变 图 形 的 显示 品质 。 制 作 矢 量 格 
式 图 形 的 软件 有 Freehand、CorelDraw、AutoCAD 等 。 

2. 位 图 


位 图 是 用 像素 点 描述 图 像 的 ， 又 称 点 阵 图 。 在 位 图 中 ， 图 像 的 细节 由 每 一 个 像素 点 的 
位 置 和 色彩 决定 。 位 图 的 品质 与 图 像 生 成 时 采用 的 分 辨 率 有 关 ， 即 在 一 定 面积 的 图 像 上 包 
含 固定 数量 的 像素 。 当 图 像 放 大 显示 时 ， 图 像 变 成 马赛 克 状 ， 因 此 放大 图 像 的 尺寸 ， 会 降 
低 图 像 的 显示 品质 ， 而 矢量 图 是 根据 几何 特性 来 绘制 图 形 ， 是 用 线段 和 曲线 描述 图 像 ， 如 
图 9.1 所 示 。 制 作 位 图 的 软件 有 Photoshop、Fireworks、ImageReady 等 。 
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点 阵 图 矢量 图 
放大 后 的 点 阵 图 放大 后 的 矢 基 图 





图 9.1 位 图 (点 阵 图 ) 和 矢量 图 


9.1.2 图像 分 辩 率 


分 辨 率 确定 了 一 幅 图 像 的 品质 和 能 够 打印 或 显示 的 细节 含量 。 分 辨 率 的 单位 为 像素 / 
英寸 (英文 缩写 为 dpi, 表示 图 像 上 每 一 线性 英寸 的 像素 数 。 线 性 是 指 在 直线 上 计算 像素 数 ， 
如 果 图 像 的 分 辩 率 是 72dpi， 即 每 英寸 72 个 像素 ， 则 每 平方 英寸 上 有 5184 个 像素 。 假 设 
图 像 中 的 像素 数 是 固定 的 ， 增 加 图 像 的 尺寸 将 降低 其 分 辨 率 ， 反 之 亦 然 。 

分 辨 率 的 大 小 直接 影响 图 像 的 品质 。 分 辩 率 越 高 ， 图 像 越 清晰 ， 文 件 也 就 越 大 ， 计 算 
机 运行 就 越 慢 。 

所 以 在 制作 图 像 时 ， 为 不 同 品质 的 图 像 设 置 适 当 的 分 辨 率 即 可 。 例 如 打印 输出 的 图 像 
分 辨 率 就 需要 高 一 些 ， 一 般 设 置 为 300dpi， 如 果 只 是 网 页 图 像 ，72dpi 就 足够 了 。 

9.1.3 图像 文件 格式 

在 计算 机 绘图 中 ， 有 较 多 的 图 形 和 图 像 处 理 软 件 ， 而 不 同 的 软件 所 保存 的 图 像 格 式 则 
是 不 相同 的 。 

例如 : Photoshop 软件 支持 的 位 图 文件 格式 有 PSD、TIF、BMP、JPG、GIF 和 PNG 等 
20 余 种 。PSD 是 Photoshop 软件 的 源 文件 格式 ， 可 保留 图 层 等 图 像 文件 的 全 部 信息 。 
PSB(Photoshop Big) 格 式 用 于 存储 大 小 超过 2GB 的 文件 。 


9.1.4 ”图 像 设计 的 分 类 





1. 标志 设计 
标志 设计 是 一 种 符号 语言 ， 通 过 简单 的 造型 或 文字 来 表现 深刻 的 含义 和 寓 和 
计 对 象 鲜明 的 个 性 特征 ， 如 图 9.2 所 示 。 
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图 9.2 标志 设计 
2. 文字 设计 
文字 是 视觉 媒体 中 重要 的 构成 要 素 ， 文 字 排 列 组 合 的 好 坏 ， 直 接 影响 着 版 面 的 视觉 传 
达 效 果 。 因 此 ， 文 字 设计 是 增强 视觉 传达 效果 、 提 高 作品 的 诉求 力 ， 赋 予 版 面 审美 价值 的 
-种 重要 构成 技术 ， 如 图 9.3 所 示 。 


la ocp 


(a) (b) 


图 9.3 文字 设计 


3. 卡片 设计 
卡片 设计 主要 包括 名 片 设计 、 邀 请 卡 、 工 作证 、 贺 卡 、 礼 品 券 、VIP 卡 、 请 束 、 宣 传 
单 等 。 卡 片 设计 要 求实 有 用、 美观， 这样 才 能 让 人 印象 深刻 、 爱 不 释 手 ， 如 图 9.4 所 示 。 





(b) 





卡片 设计 
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4. 平面 广告 设计 
平面 广告 是 传递 信息 的 一 种 方式 ， 是 广告 主 与 受众 间 的 媒介 ， 其 结果 是 为 了 达到 一 定 
的 商业 目的 或 政治 目的 ， 平 面 广告 在 经 济 高 速 发 展 的 国家 是 不 可 缺少 的 ， 如 图 9.5 所 示 。 
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图 9.5 招贴 海报 设计 
5. 产品 包装 设计 


产品 包装 设计 是 将 美术 与 自然 科学 相 结 合 ， 运 用 到 产品 的 包装 保护 和 美化 方面 ， 它 的 
主要 作用 是 保护 产品 、 美 化 和 宣传 产品 ， 如 图 9.6 所 示 。 





图 9.6 产品 包装 设计 


6. 网 页 设计 

网 页 是 构成 网 站 的 基本 元 素 ， 是 承载 各 种 网 站 应 用 的 平台 ， 如 何 运 用 平面 设计 软件 制 
作出 让 浏览 者 流连 忘 返 的 精美 网 页 是 非常 关键 的 ， 如 图 9.7 所 示 ( 本 书 主要 介绍 利用 平面 设 
计 软 件 进行 网 页 设计 )。 









































*。138 。 网 站 规划 与 网 页 设计 (第 二 版 ) 


DCW 到 ma， 0I0-51111691 





图 9.7 网 页 设计 
平面 设计 中 涉及 的 其 他 类 型 这 里 就 不 一 一 列举 了 。 


9.2 色彩 的 应 用 


9.2.1 色彩 模式 


为 了 能 更 好 地 应 用 色彩 来 设计 网 页 ， 先 来 介绍 色彩 的 一 些 基 本 概念 。 自 然 界 中 有 很 多 
种 色彩 , 例如 玫瑰 是 红色 的 \ 大 海 是 蓝 色 的 、 桶 子 是 橙色 的 等 , 但 是 最 基本 的 色彩 有 三 种 ( 红 、 
绿 、 蓝 )， 其 他 的 色彩 都 可 以 由 这 三 种 色彩 调和 而 成 ， 这 三 种 色彩 称 为 “三 原色 ”。 
现实 生活 中 的 色彩 可 以 分 为 彩色 和 非 彩色 。 其 中 ， 黑 、 白 、 灰 属于 非 彩 色 系列 ， 其 他 
的 色彩 都 属于 彩色 ， 如 图 9.8 和 图 9.9 所 示 。 




















图 9.8 彩色 图 9.9 非 彩 色 图 
下 面 介绍 三 种 常用 的 色彩 模式 。 
1. HSB 模式 


在 HSB 色彩 模式 中 ,任何 一 种 色彩 都 具备 三 个 要 素 : 色相 (HD、 纯 度 (S) 和 明度 (B)。 把 
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这 三 个 要 素 做 成 立体 坐标 ， 就 构成 色 立 体 ， 其 中 非 彩 色 只 有 明度 属性 ， 如 图 9.10 所 示 。 

1) 色相 H(Hue) 

色相 也 叫 色调 ， 指 颜色 的 种 类 和 名 称 ， 是 指 颜 色 的 基本 特征 ， 是 一 种 颜色 区 别 于 其 他 
颜色 的 因素 。 色 相 和 色彩 的 强 弱 及 明暗 没有 关系 ， 只 是 纯粹 表示 色彩 相貌 的 差异 。“ 备 塞 
尔 色相 环 ” 的 色彩 表示 法 以 享 赫 尔 兹 的 五 颜色 理论 为 基础 ， 即 色相 环 被 红 、 黄 、 绿 、 蓝 、 
紫 五 种 色相 平均 分 割 为 五 等 分 ， 再 加 上 这 五 色 的 五 个 中 间 色 相 ( 橙 、 黄 绿 、 蓝 绿 、 蓝 紫 、 紫 
红 )， 得 到 10 个 基本 色相 ， 再 将 每 个 色相 10 等 分 ， 最 后 形成 100 个 色相 的 色相 环 。“ 盏 塞 
尔 色相 环 ” 中 的 十 色 环 如 图 9.11 所 示 。 














图 9.10 色 立 体 图 9.11 十 色 环 


2) 纯度 S(Saturation) 

纯度 也 叫 饱和 度 ， 指 色彩 的 鲜艳 程度 。 以 正 红 为 例 ， 有 鲜艳 无 杂质 的 纯 红 ， 有 涩 而 干 
残 的 “ 凋 玫 瑰 ”， 也 有 较 淡 薄 的 粉红 。 一 般 来 说 ， 原 色 最 纯 ， 颜 色 的 混合 越 多 ， 纯 度 逐 渐 
减低 。 如 某 一 鲜亮 的 颜色 ,加 入 了 白色 或 黑色 , 会 使 得 它 的 纯度 降低 , 颜色 趋 于 柔和 、 沉 稳 。 

3) 明度 B(Brightness) 

明度 也 叫 亮度 ， 指 颜色 的 深浅 、 明 暗 程度 ， 没 有 色相 和 饱和 度 的 区 别 。 不 同 的 颜色 ， 
反射 的 光量 强 弱 不 一 ， 因 而 会 产生 不 同 程度 的 明暗 。 非 色彩 的 黑 、 灰 、 白 较 能 形象 地 表达 
这 一 特质 ， 白 色 为 最 亮 ， 黑 色 为 最 暗 ， 黑 白 之 间 不 同 程度 的 灰 ， 都 具有 明暗 强度 的 表现 。 
彩色 则 根据 自身 所 具有 的 明度 值 ， 并 通过 加 减 灰 、 白 来 调节 明暗 ， 如 图 9.12(a) 和 图 9.12(b) 
所 示 。 


2. RGB 色彩 模式 


RGB 色彩 模式 是 工业 界 的 一 种 颜色 标准 ， 表 示 红 色 、 绿 色 、 蓝 色 ， 又 称 为 三 原色 ， 英 
文 为 R(Red)、G(Green)、B(Blue)， 通 过 它们 相互 之 间 的 又 加 来 得 到 各 种 颜色 。 

通常 情况 下 ，RGB 各 有 256 级 亮度 ， 用 数字 表示 就 是 从 0、1、2 至 255， 共 256 级 。 
按照 计算 ，256 级 的 RGB 色彩 总 共 能 组 合 出 约 1678 万 种 色彩 ， 即 256X256X256== 
16777216， 通 常 也 被 简称 为 1600 万 色 或 千 万 色 ， 也 称 为 24 位 色 (2 的 24 次 方 )。 
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(a) 明度 高 (b) 明度 低 
图 9.12 明度 


对 于 单独 的 R、G 或 B 而 言 ， 当 数值 为 0 时 ， 代 表 这 种 颜色 不 发 光 ; 如 果 为 255， 该 
颜色 为 最 高 亮度 。 因 此 ， 若 RGB 三 种 色光 都 到 最 强 的 亮度 ， 纯 白 的 RGB 值 就 为 (255, 255， 
255)。 黑 色 的 RGB 值 是 (0, 0, 0)。R 意味 着 只 有 红色 存在 ， 且 亮度 最 强 ，G 和 B 都 不 发 光 ， 
人 0, 0); 同 理 ， 最 绿 颜 色 就 是 (0, 255, 0); 而 最 蓝 颜色 就 是 (0, 0， 
255)。 黄 色 较 特殊 ， 是 由 红色 加 绿色 而 得 (255, 255, 0)。 

RGB 模式 是 旺 示 六 的 和 下 人 模式 。 这 就 意味 着 无 论 在 软件 中 使 用 何 种 色彩 模式 ， 只 

是 在 显示 器 上 显示 的 ， 图 像 最 终 就 是 以 RGB 方式 出 现 。 
3. CMYK 模式 
C: 青色 ，Cyan。M: 洋红 色 ，Magenta。Y: 黄色 ，Yellow。K: 黑色 , blacK。CMYK 
模式 针对 印刷 媒介 ， 即 基于 油墨 的 光 吸收 /反射 特性 ， 眼睛 看 到 的 颜色 实际 上 是 物体 吸收 白 
光 中 特定 频率 的 光 而 反射 其 余 的 光 的 颜色 。 

CMYK 在 印刷 中 代表 4 种 颜色 的 油墨 ,每 种 CMYK 4 色 油 墨 可 使 用 从 0 至 100% 的 值 。 
CMY 为 减 色 原理 ，CMY 以 白色 为 底 色 减 ， 即 CMY 均 为 0 是 白色 ， 均 为 100% 是 黑色 (但 
在 实际 中 ， 由 于 油墨 的 纯度 等 问题 这 样 得 不 到 纯正 的 黑色 ， 因 此 引入 黑色 )。 














注意 : 

在 Photoshop 中 ,在 准备 用 印刷 颜色 打印 图 像 时 , 应 使 用 CMYK 模式 . 如 果 基于 RGB 
模式 进行 设计 的 图 像 ， 完 成 编辑 后 ， 最 好 将 图 像 转换 为 CMYK 模式 。 如 果 以 RGB 模式 输 
出 图 片 直接 打印 ， 印 刷 品 的 实际 颜色 将 与 RGB 预览 颜色 有 较 大 差异 。 


9.2.2 色彩 的 应 用 


色彩 使 宇宙 万 物 充满 情感 ， 生 机 勃勃 。 色 彩 作为 一 种 最 普遍 的 审美 形式 ， 存 在 于 人 们 
日 常生 活 的 各 个 方面 ， 人 们 的 衣 、 食 、 住 、 行 、 用 ， 均 与 色彩 发 生 着 密切 的 关系 。 

1) 色彩 的 冷暖 

红 、 橙 、 黄 等 颜色 使 人 联想 到 阳光 、 烈 火 ， 故 称 为 “暖色 ”; 绿 、 青 、 蓝 等 颜色 与 黑 
夜 、 寒 冷 相连 ， 故 称 为 “冷色 ” 

2) 色彩 的 轻重 

各 种 色彩 给 人 的 轻重 感 不 同 ， 从 色彩 得 到 的 轻重 感 ， 是 质感 与 色 感 的 复合 感觉 。 浅 
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密度 小 ， 给 人 分 量 轻 的 感觉 ， 深 色 密 度 大 ， 给 人 分 量 重 的 感觉 。 

3) 色彩 的 前 进 与 后 退 

如 果 等 距离 地 观察 两 种 颜色 , 可 以 给 人 不 同 的 远近 感 。 暖色 比 冷色 更 富有 前 进 的 特性 。 
两 色 之 间 ， 亮 度 偏 高 的 色彩 呈 前 进 性 ， 饱 和 度 偏 高 的 色彩 也 呈 前 进 性 。 

4) 色彩 的 艳丽 与 素雅 

如 果 是 单 色 ， 饱 和 度 越 高 ， 色 彩 越 艳 丽 。 饱 和 度 越 低 ， 色 彩 越 素 牙 。 除 了 饱和 度 ， 亮 
度 也 有 一 定 的 关系 。 不 论 什么 颜色 ， 亮 度 高 时 ， 即 使 饱和 度 低 也 给 人 艳丽 的 感觉 。 


9.2.3 配色 方案 的 应 用 实例 


红色 让 人 联想 到 玫瑰 、 喜 庆 、 兴 奋 ; 白色 让 人 联想 到 纯洁 、 干 净 、 简 洁 ; 紫色 象征 女 
性 化 、 高 雅 、 浪 漫 ， 蓝 色 和 象征 高 科技 、 稳 重 、 理 智 ， 检 色 代 表 了 欢快 、 甜 美 、 收 获 ， 绿 色 
代表 了 充满 青春 的 活力 、 舒 适 、 希 望 等 。 当 然 不 是 说 某 种 色彩 一 定 代表 了 什么 含义 。 在 特 
定 的 场合 下 ， 同 种 色彩 可 以 代表 不 同 的 含义 。 更 多 的 色彩 知识 可 参考 专业 的 色彩 理论 与 应 
用 方面 的 书籍 ， 这 里 仅 介绍 几 种 常用 的 网 页 色彩 配色 实例 。 


1. 红色 色 系 


红色 是 最 鲜明 生动 的 、 最 热烈 的 颜色 ， 因 此 红色 也 是 代表 热情 的 情感 之 色 。 鲜 红色 极 
容易 吸引 人 们 的 目光 。 在 主要 由 红色 成 分 构成 的 色彩 中 ， 粉 红色 象征 浪漫 、 温 整 ， 暗 红色 
象征 神秘 、 深 沉 ， 桃 红色 象征 时 尚 、 明 亮 。 下 面 研究 的 是 红色 的 配色 规律 。 

高 亮度 的 红色 通过 与 灰色 、 黑 色 等 非 彩色 搭配 使 用 ， 可 以 得 到 现代 且 激进 的 感觉 。 

低 亮 度 的 红色 具有 冷静 沉重 的 感觉 ， 可 以 营造 古典 的 氛围 。 

红色 如 果 与 亮度 、 饱 和 度 较 强 的 冷色 (如 蓝 色 、 绿 色 ) 相 配 ， 中 间 最 好 能 有 一 些 过 渡 性 
的 颜色 ， 如 纯 红 与 纯 蓝 相配 时 ， 中 间 可 以 插入 面积 适中 的 白色 ， 大 红 与 大 绿 相配 时 ， 中 间 
可 以 用 棕色 或 黑色 间隔 ， 如 图 9.13 所 示 。 


2. 蓝 色色 系 


蓝 色 是 色彩 中 比较 沉静 的 颜色 ， 是 现代 商务 领域 常用 的 流行 色 。 蓝 色 与 绿色 、 白 色 的 
搭配 在 现实 生活 中 随处 可 见 。 

主 色调 选择 明亮 的 蓝 色 ， 配 以 白色 的 背景 和 灰 亮 的 辅助 色 ， 可 以 使 站 点 干净 而 整洁 ， 
给 人 庄重 、 充 实 的 印象 。 

蓝 色 、 青 绿色 、 白 色 的 搭配 可 以 使 页 面 看 起 来 非常 干净 清澈 ， 如 图 9.14 所 示 。 

3. 其 他 色 系 

1) 橙色 

使 用 高 亮度 的 橙色 的 站 点 通常 都 会 给 入 一 种 晴朗 新 鲜 的 感觉 ， 而 通过 将 黄色 、 绿 色 等 
颜色 与 橙色 搭配 使 用 ， 通 常 能 得 到 非常 好 的 效果 ， 而 中 等 色调 的 橙色 类 似 于 泥土 的 颜色 ， 
用 来 创造 自然 的 氛围 。 
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图 9.13 ”网 页 红色 系 配色 案例 


2) 黄色 

黄色 是 阳光 的 色彩 ， 具 有 活泼 与 轻快 的 特点 ,给 人 十 分 年 轻 的 感觉 ,浅黄 色 表示 和 柔弱 ， 
灰 黄 色 表示 病态 。 高 彩 度 的 黄色 与 黑色 搭配 能 得 到 清晰 整洁 的 效果 ;采用 同一 色调 的 深 褐 
色 与 黄色 的 搭配 ， 可 以 表达 一 种 成 熟 的 城市 时 尚 感觉 。 
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图 9.14 网 页 蓝 色 系 配 色 案 例 
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3) 绿色 

绿色 代表 着 生命 与 希望 ， 充 满 了 青春 活力 ， 经 常用 于 与 自然 、 健 康 相关 的 站 点 。 与 绿 
色 搭 配 的 近似 色 有 其 他 种 类 的 绿色 、 蓝 绿色 、 黄 绿色 、 较 柔和 的 紫色 等 ， 与 橙色 、 黄 色 、 
白色 等 搭配 可 以 形成 鲜明 对 比 的 色彩 组 合 ， 与 橙色 的 搭配 将 是 非常 不 错 的 选择 。 

4. 黑白 灰色 彩 


黑白 灰 是 万 能 色 ， 可 以 跟 任 意 一 种 色彩 措 配 。 当 用 户 为 某 种 色彩 的 搭配 苦恼 的 时 候 ， 
不 妨 试 试 黑白 灰 。 当 用 户 觉得 两 种 色彩 的 搭配 不 协调 ， 试 试 加 入 黑色 或 灰色 。 对 一 些 明度 
较 高 的 网 站 ， 配 以 黑色 ， 可 以 适当 地 降低 明度 。 

白色 是 网 站 使 用 最 普遍 的 一 种 颜色 。 很 多 网 站 甚至 留 出 大 块 的 白色 空间 ， 作 为 网 站 的 
一 个 组 成 部 分 ， 这 就 是 留 白 艺术 。 留 白 , 给 人 一 个 遐想 的 空间 ， 让 人 感觉 心情 舒适 、 畅 快 ， 
恰当 的 留 白 对 于 协调 页 面 的 均衡 起 到 相当 大 的 作用 ， 设 计 型 网 站 较 多 运用 留 白 艺术 。 

一 个 网 站 不 可 能 单一 地 运用 一 种 颜色 ， 让 人 感觉 单调 、 乏 味 ， 但 是 也 不 可 能 将 所 有 的 
颜色 都 运用 到 网 站 中 ， 让 人 感觉 轻浮 、 花 哨 。 一 个 网 站 必须 有 一 种 或 两 种 主题 色 ， 不 至 于 
让 浏览 者 迷失 方向 ， 也 不 至 于 单调 ， 乏 味 。 所 以 ， 确 定 网 站 的 主题 色 也 是 设计 者 必须 考虑 
的 问题 之 一 。 

-个 页 面 尽量 不 要 超过 4 种 色彩 ， 用 太 多 的 色彩 让 人 没有 方向 、 没 有 侧重 。 当 主题 色 
确定 好 以 后 ， 考 虑 其 他 配色 时 ， 一 定 要 考虑 其 他 配色 与 主题 色 的 关系 ， 要 体现 什么 样 的 效 
果 。 男 外 ， 哪 种 因素 占 主 要 地 位 ， 是 明度 、 纯 度 还 是 色相 ? 

如 想 了 解 更 多 的 知识 ， 请 查看 《网 页 设计 配色 实例 分 析 》 等 参考 书籍 。 



































9.3 ”网 页 设计 的 构图 


9.3.1 构图 概述 


构图 一 词 是 英文 composition 的 音译 , 为 造型 艺术 的 术语 。 它 的 含义 是 : 把 各 部 分 组 成 ， 
结合 、 配 置 并 加 以 整理 出 一 幅 艺 术 性 较 高 的 画面 。 在 《辞海 》 中 ， 谈 到 “构图 ”时 解释 为 
艺术 家 为 了 表现 作品 的 主题 思想 和 美感 效果 ， 在 一 定 的 空间 ， 安 排 和 处 理 人 、 物 的 关系 及 
位 置 ， 把 个 别 或 局 部 的 形象 组 成 艺术 的 整体 。 

在 中 国 传统 绘画 中 ， 称 “构图 ”为 “章法 ” “布局 ”或 “经 营 位 置 "。 这 个 术语 包含 
着 一 个 基本 而 概括 的 意义 ， 那 就 是 把 构成 整体 的 那些 部 分 统一 起 来 ， 在 有 限 的 空间 或 平面 
上 对 作者 所 表现 的 元 素 进 行 组 织 ， 形 成 画面 的 特定 结构 ， 借 以 实现 设计 者 的 表现 意图 。 构 
图 是 指 画 面 形 象 安排 和 组 合 的 经 验 手法 。 我 们 通常 说 的 构图 法 -一 均衡 、 对 称 、 分 割 、 对 
比 、 视 点 ， 就 是 要 通过 位 置 关系 ， 突 出 主体 ， 主 次 分 明 ， 令 人 人 赏心悦目。 如果 考虑 更 广阔 





的 实体 ， 还 包括 看 得 见 的 光影 虚实 、 气 氛 、 情 感 ， 它 们 也 是 构图 。 
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构图 还 需 讲 究 艺术 技巧 和 表现 手法 ， 在 我 国 传统 艺术 里 叫 “ 意 匠 ”。 意 匠 的 精 拙 ， 直 
接 关 系 到 一 幅 作品 意境 的 高 低 。 任 何 视觉 设计 都 离 不 开 构 图 ， 如 绘画 、 平 面 设计 、 摄 影 、 
影视 、 广 告 等 。 

1. 构图 的 目的 

每 一 个 设计 题材 ， 不 论 平 淡 还 是 宏伟 、 重 大 还 是 普通 ， 都 包含 着 视觉 美 点 ， 简 称 视觉 





们 的 一 般 特 征 ， 而 把 它们 看 作 形 态 、 线 条 、 质 地 、 明 上 暗 、 颜 色 、 用 光 和 立体 物 的 结合 体 。 
也 就 是 归纳 为 点 、 线 、 面 。 构 图 的 基本 任务 ， 是 最 大 可 能 阐明 艺术 家 的 构思 。 构 图 的 目的 
是 : 把 构思 中 典型 化 了 的 人 或 物 加 以 强调 、 突 出 ， 从 而 舍弃 那些 一 般 的、 表面 的 、 烦 琐 的 、 
次 要 的 东西 ， 并 恰当 地 安排 陪衬 体 ， 选 择 环 境 ， 使 作品 比 现实 生活 更 高 、 更 强烈 、 更 完善 、 
更 集中 、 更 典型 、 更 理想 ， 以 增强 艺术 效果 。 总 的 来 说 ， 就 是 把 设计 主题 的 思想 情感 传递 
给 别人 。 


2. 构图 的 性 质 


构图 和 设计 可 以 通用 ， 因 为 它们 的 含义 是 一 样 的 。 设 计 的 精确 概念 及 其 原始 含义 是 构 
思 ， 即 艺术 家 为 了 明确 表达 自己 的 思想 而 适当 安排 各 种 视觉 要 素 的 那 种 构思 。 

古人 将 章法 (构图 ) 比 作 下 棋 ， 因 此 把 构图 称 为 画面 总 要 ， 所 谓 总 要 就 是 纲要 、 概 要 的 
意思 。 画 面 构图 就 像 写 文章 一 样 ， 做 到 有 章 有 法 、 有 次 有 主 、 相 互 呼应 、 虚 实 对 比 、 藏 露 
隐现 、 简 繁 适中 、 政 密 无 间 等 构图 规律 ， 服 从 于 主题 表现 的 要 求 ， 同 时 又 要 取得 整体 形式 
感 的 完美 和 谐 统一 。 


3. 构图 的 视觉 表现 形式 


将 表现 主题 的 各 个 构成 要 素 按照 主 次 关系 放置 在 画面 相应 的 区 域 ， 形 成 视觉 感受 ， 达 
到 设计 意图 ， 就 叫 构图 ， 主 体 元 素 与 辅助 元 素 按照 什么 形式 规格 出 现 就 是 构图 的 形式 。 不 
同 的 主题 、 产 品 使 用 不 同 的 构图 形式 ， 它 们 有 着 内 在 的 规律 。 无 论 是 摄影 、 平 面 广告 、 
BANNER 还 是 互动 设计 稿 ,在 构图 上 原理 是 一 致 的 。 下 面 以 门户 BANNER 为 例 讲解 构图 
的 形式 及 相应 的 特征 分 析 。 

如 图 9.15 所 示 的 构图 表现 形式 (一 )， 这 种 构图 能 充分 显示 景物 的 高 大 和 深度 。 摄 影 方 
面 常 用 于 表现 郁郁 葡萄 的 森林 与 参天 大 树 、 险 峻 的 山石 、 飞 泻 的 瀑布 、 摩 天 大 楼 ， 以 及 竖 
直线 形成 的 其 他 画面 。 在 产品 BANNER 设计 方面 常用 于 表现 单薄 细 长 的 物体 。 这 种 构图 
给 人 以 满足 的 感觉 ,画面 结构 完美 无 缺 、 安 排 巧 妙 、 对 应 而 平衡 。 

如 图 9.16 所 示 的 构图 表现 形式 (二 )， 分 为 立 式 斜 垂 线 和 平 式 斜 横 线 两 种 。 摄 影 方面 常 
用 于 表现 运动 、 流 动 、 人 和 倾斜、 动荡 、 失 衡 、 紧 张 、 和 危险、 一 泻 千 里 等 场面 。 有 的 画面 也 利 
用 和 斜 线 指出 特定 的 物体 ， 起 到 固定 导向 的 作用 。 设 计 方 面 用 于 表现 运动 鞋 、 运 动 服 、 细 长 
的 铅笔 、 牙 刷 、 灯 管 等 产品 对 象 。 





第 9 章 网 页 设计 基础 理论 »145. 


广告 词 
到 加 
中 红 (黄金 分 点 ) 
近景 (特写 ) 








图 9.15 构图 表现 形式 (一 ) 
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We 构图 表现 形式 (二 ) 
以 主体 为 核心 , 元 素 呈 向 四 周 扩散 放射 的 构图 形式 , 常用 于 需要 突出 主体 而 元 素 又 多 、 
又 复杂 的 场景 ， 或 是 产品 多 但 单个 产品 和 画面 比例 严重 失调 的 情况 ， 适 合 表现 单薄 细 长 的 
物体 或 是 中 景 拍摄 的 物体 。 
如 图 9.17 的 2)， 把 主体 安排 在 对 角 线 上 ， 能 有 效 利 用 画面 对 角 线 
的 长 度 ， 同 时 也 能 使 广告 词 与 主体 发 生 直接 关系 。 富 于 动感 ， 显 得 活泼 ， 容 易 产 生 线 条 的 
汇聚 趋势 ， 吸 引信 的 视线 ， 达 到 主体 突出 、 视 觉 均衡 的 效果 。 


有 广告 词 ne 
| N xs ET 


图 9.17 构图 表现 形式 (三 ) 


正三 角形 有 安定 感 , 逆 三 角形 具有 不 安定 感 效 果 。 以 三 个 视觉 中 心 为 景物 的 主要 位 置 ， 
有 时 是 以 三 点 成 一 面 的 几何 形成 安排 景物 的 位 置 ， 形 成 一 种 稳定 的 三 角形 。 这 种 三 角形 可 
以 是 正三 角 ， 也 可 以 是 斜 三 角 或 倒 三 角 。 其 中 斜 三 角 较为 常用 ， 也 较为 灵活 。 三 角形 构图 
具有 安定 、 均 衡 、 灵 活 等 特点 。 

如 图 9.18 所 示 的 构图 表现 形式 (四 )， 用 景物 的 框架 做 前 景 ， 能 增加 画面 的 纵向 对 比 和 
装饰 效果 。 使 照片 产生 深度 感 。 设 计 方面 用 主 元 素 左右 填充 形成 中 间 空 白 ， 空 白 处 放置 广 
告 词 。 将 主体 或 重要 元 素 放 在 “九宫 格 ” 交 叉 点 的 位 置 。“ 井 ” Ht ae 
最 佳 位 置 。 一 般 认 为 : 右上 方 的 交叉 点 最 为 理想 ， 其 次 为 右 下 方 的 交叉 点 。 但 也 不 是 
不 变 的 。 这 种 构图 格式 较为 符合 人 们 的 视觉 习惯 ,使 主体 自然 成 为 视觉 中 心 ， ee 
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体 ， 并 使 画面 趋向 均衡 的 特点 。 


广告 词 








图 9.18 构图 表现 形式 (四 ) 


9.3.2 ”构图 范例 欣赏 


图 9.19 一 图 9.24 所 示 为 一 些 典 型 构图 范例 。 
图 9.19 采用 垂直 式 构图 ， 前 提 是 画面 的 模特 是 中 景 距 离 ， 模 特 外 形 细 长 。 


修身 直 员 + 家 秃 窑 轩 * 辽 


W 信 我 章 我 衬 


图 9.19 季 直 式 构图 
图 9.20 和 图 9.21 采用 三 角 式 构图 。 三 角形 构图 可 用 于 不 同 景 别 , 如 近景 人 物 、 特写 等 。 








图 9.20 倒 三 角 构 图 
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立顿 奶茶 为 你 “ 冲 ” 满 朝气 





图 9.21 正三 角 式 构图 
图 9.22 采用 放射 式 构 图 。 放射 式 构图 亦 称 “ 向 心 式 构图 ”， 即 主体 处 于 中 心 位 置 ， 而 
四 周 景物 采用 向 中 心 集中 的 构图 形式 ， 能 将 人 的 视线 强烈 引 向 主体 中 心 ， 并 起 到 聚集 的 作 
有 



































10 局 


温 笑 贺 戎 统 家 居 畦 





图 9.22 ”放射 式 构 图 


图 9.23 采用 斜 线 式 构图 。 斜 线 式 构图 的 原因 是 产品 细 长 、 形 体 单薄 ， 是 线 状 ， 不 容易 
形成 面 的 感觉 ， 所 以 产品 组 织 时 适合 用 单 向 斜 线 。 











图 9.23 和 斜 线 式 构图 


当然 ， 应 根据 不 同 的 行业 产品 、 不 同 的 产品 特性 灵活 运用 构图 来 表现 设计 主题 和 设计 
形式 美 ， 如 图 9.24 所 示 。 
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图 9.24 生活 中 的 构图 


9.4 ”网 页 设计 的 流程 


9.4.1 网 页 策划 


在 进行 网 站 页 面 设计 之 前 ， 必 须 对 企业 有 足够 的 了 解 ， 对 网 站 的 定位 、 背 景 、 收 入 、 
预期 ， 有 一 个 足够 清楚 的 认识 。 

下 面 以 一 个 企业 网 站 为 例 , 如 图 9.25 所 示 。 这 是 一 个 关于 为 企业 提供 电子 商务 服务 的 
企业 网 站 ， 类 型 是 电子 商务 ， 主 要 客户 群 是 国内 用 户 ， 为 传统 知名 品牌 及 企业 提供 全 网 、 
全 渠道 的 一 站 式 电 商 全 托管 服务 。 设 计 者 参与 了 网 站 建设 方案 的 讨论 ， 提 出 了 自己 的 意见 
或 建议 ， 将 它 定位 为 一 个 极 具 构 图 质感 、 充 满 现 代 气 息 的 电子 商务 网 站 。 








图 ASAw Waopuowawee COMPANY PRODUCT “CUSTOMER ”RECRUT COMMUNITY 





图 9.25 ”网 站 效果 图 


9.4.2 设计 网 页 原型 图 


在 前 期 讨论 了 一 定 的 结果 后 ， 可 以 开始 设计 草稿 了 ， 即 为 初稿 ， 可 以 是 纸 质 ， 也 可 以 
是 电脑 上 的 简单 图 形 。 初 稿 不 用 太 规整 ， 只 需要 排出 需要 的 模块 与 功能 、 网 站 的 大 体 结构 。 
考虑 网 站 结构 是 否 合理 ， 功 能 是 否 有 缺失 ， 功 能 模块 如 何 摆 放 等 。 
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通过 简单 的 线 框 ， 就 能 达到 网 站 上 的 效果 。 完 成 线 框 原 型 图 后 ， 这 个 网 站 的 雏形 已 经 
出 来 了 ， 与 客户 沟通 ， 询 问 是 否 有 什么 不 妥 ， 流 程 是 否 通畅 ， 体 验 是 否 妥 当 。 当 原型 图 没 
有 任何 问题 的 时 候 ， 开 始 下 一 步 设计 。 


9.4.3 设计 网 页 效果 图 


确定 整个 网 站 的 主 色调 ， 这 里 使 用 了 商务 的 常用 色 : 灰色 和 蓝 色 。 根 据 网 站 的 需求 ， 
在 首页 上 ， 突 出 立体 效果 的 BANNER， 让 周围 的 模块 弱化 。 而 在 细节 上 ， 没 有 过 多 花哨 
的 设计 ， 几 个 简单 的 渐变 ， 以 及 纯色 块 ， 更 加 符合 网 站 的 定位 、 受 众 群 体 。 需 要 特别 注意 
的 是 ， 网 站 必须 规整 、 严 谨 ， 才 能 体现 出 设计 者 的 专业 。 与 客户 探讨 一 些 细节 上 的 问题 ， 
进行 网 页 效果 图 的 细 化 和 完善 ， 最 后 确定 网 站 总 体 效 果 。 网 页 效果 图 如 图 9.25 所 示 。 


9.4.4 网 页 设计 实例 -房地产 网 站 首页 设计 


1. 设计 构思 


皇家 帝王 广场 项 目 将 建成 集 生态 、 居 住 、 商 务 为 一 体 的 城市 标志 性 住宅 小 区 ， 为 政府 
重点 形象 工程 。 楼 盘 定 位 为 皇家 高 贵 血统 ， 楼 盘 的 卖点 突出 在 同一 个 城市 下 不 同 的 生活 品 
位 和 生活 方式 ， 其 核心 广告 词 : “一 样 的 城市 ， 不 一 样 的 生活 ”、“ 用 世界 的 高 度 定义 品 
质 豪 宅 ”、“ 大 势 之 下 ， 财 富 新 坐标 。” 在 表现 上 ， 楼 盘 是 地 标 性 建筑 群 ， 具 有 皇家 血统 
元 素 ， 拥 有 皇家 园林 主题 景观 ， 在 设计 上 表现 皇家 高 贵 气质 ， 因 此 设计 要 有 让 人 感受 高 品 
质 的 生活 方式 。 

2. 设计 前 的 准备 工作 

1) 通过 LOGO 对 楼 盘 定 位 进行 解析 

楼 盘 的 LOGO 是 楼 盘 概 念 的 浓缩 版 ， 从 LOGO 可 以 看 出 楼 盘 的 基本 信息 ， 中 式 楼 盘 
的 LOGO 含有 书法 、 水 墨 等 元 素 ， 欧 式 LOGO 带 有 明显 的 欧式 特征 ， 如 马车 、 花 纹 、 金 
属 质感 、 雕 塑 等 。 此 案例 LOGO 使 用 的 元 素 有 欧式 宝剑 、 花 纹 ， 楼 盘 文字 信息 有 “帝王 广 
场 ” » 如 图 9.26 所 示 。 





图 9.26 楼 盘 网 站 LOGO 


2) 撰写 软文 

楼 盘 位 于 城市 版 图 核心 ， 环 境 一 一 开创 市 中 心 极 品 人 居 和 氛围 ， 景 观 一 打造 帝王 私 属 
园林 ; 停车 一 一 阳光 生态 车 库 ， 建 筑 一 一 高 品质 生活 社区 ; 商业 一 一 风情 商业 街区 。 

3) 搜索 关键 字 

准备 素材 之 前 先 对 出 现 的 元 素 进行 关键 字 搜索 ， 如 皇家 、 帝 王 、 皇 冠 、 王 座 、 广 场 、 
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欧式 花纹 、 宝 剑 、 国 王 、 金 属 、 奢 华 、 高 贵 、 富 丽 堂皇 等 。 
4) 按 关键 词 发 散 思 维 
准备 好 基本 的 关键 词 ， 对 关键 词 进行 筛选 、 过 滤 ， 如 图 9.27 所 示 。 








图 9.27 关键 字 发 散 思 维 


5) 收集 素材 

关键 词 具 体 化 后 ， 可 以 到 素材 网 站 上 下 载 所 需 的 素材 ， 要 求 素材 的 精度 要 高 ， 高 清 素 
材 ， 背 景 类 素材 的 尺寸 要 求 不 低 于 1024X768 像素 ， 辅 助 素材 不 低 于 800X 600 像素 ， 越 
大 越 好 ， 越 清晰 越 好 ， 如 图 9.28 所 示 。 





图 9.28(a) LOGO 制作 素材 





图 9.28 (b) 皇家 标志 制作 素材 
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图 9.28 (c) 楼宇 对 应 素材 


3. 网 站 首页 页 面 设 计 


1) 先 将 页 面 分 成 上 、 中 、 下 三 栏 ， dd 菜单 有 金属 感 ， 将 菜单 指示 效 
果 做 成 金属 感 ， 菜 单间 的 空 ee 肾 小 ， 利 用 调整 图 层 控 制 LOGO 
背景 的 光 效 , 为 了 增强 菜单 背景 的 肌理 质感 , 适合 在 背景 a 如 图 9.29 所 示 。 


图 9.29 首页 布局 设计 


2) 构建 场景 : 先 将 城市 背景 元 素 加 进来 , 背景 城市 在 放置 的 时 候 一 般 要 重心 下 移 留 出 
天 空 的 位 置 , 也 是 留 出 位 置 放 广告 词 。 不 要 把 画面 塞 得 很 满 , 画面 有 透气 感 才 好 , 如 图 9.30 
所 示 。 





3) 图 像 的 合成 : 城市 和 天 空 混合 ， 城 市 正片 登 底 后 下 十 白色 图 层 。 上 面 是 天 空 图 片 ， 
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下 面 是 城市 ， 城 市 的 图 层 混合 模式 设置 为 正片 登 底 ， 然 后 在 下 面 建 图 层 ， 用 钢笔 工具 将 大 
楼 的 外 轮廓 描 出 路 径 ， 用 和 白色 填充 。 多 做 几 个 图 层 ， 分 别 用 白色 值 填充 ， 便 于 以 后 修改 。 
然后 调整 图 层 ， 将 右边 天 空 的 云 调整 得 亮 些 ， 如 图 9.31 所 示 ， 有 具体 参数 如 图 9.32 所 示 。 





























图 9.31 首页 合成 设计 





E93 如 控制 城市 主体 楼 层 清晰 显示 









































区 白色 底 3- 用 来 衬托 正片 到， 
| 古 白色 启 2- 用 末 衬 托 正片 各.… 
| 刘 白色 底 1- 用 来 衬托 正片 得 … 
Eal 白色 府 用 来 衬托 正片 委 … 
图 9.32 ”Photoshop 中 首页 设计 中 的 图 层 混合 模式 


4) 摆 放 主体 元 素 : 用 拿破仑 形象 代表 帝王 ， 用 地 标 建筑 代表 瘟 立 六 峰 ， 傲 视 群 城 。 捍 
放 元 素 要 注意 大 小 、 位置 、 比 例 要 合适 , 主 元 素 造型 要 完整 , 做 到 整体 没有 缺失 ， 如 图 9.33 
所 示 。 





图 9.33 主体 元 素 摆 放 效 果 图 


5) 放置 广告 词 : 放置 位 置 的 背景 图 形 不 要 太 复 杂 , 广告 词 是 重 色 ,背景 就 要 浅 些 ; 广 
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告 词 的 背景 是 深 色 ， 广 告 词 就 用 浅 色 。 一 般 来 说 ， 地 产 的 广告 词 由 主 标题 、 副 标题 、 说 明 
文字 等 组 成 ， 如 图 9.34 所 示 。 














图 9.34 广告 词 放 置 效 果 图 
6) 调整 色彩 : 调整 色调 的 指导 原则 有 三 : 第 一 、 基 于 VI 色 ; 第 二 、 色彩 的 冷暖 关系 ; 
第 三 、 色 彩 协调 。VI 色 决 定 画 面 的 色调 关系 ， 确 定 画 面 是 暖 调 还 是 冷 调 、 亮 调 还 是 暗 调 ; 
色彩 冷暖 是 指 在 同一 色调 范围 内 的 色彩 关系 要 有 冷暖 对 比 ， 色 彩 协 调 是 指 色彩 在 对 比 的 时 
候 要 达到 统一 、 协 调 、 均 衡 ， 效 果 图 如 图 9.35 所 示 。 








图 9.35 首页 设计 最 终 效果 图 


小 结 


本 章 主要 介绍 了 网 页 设计 基础 理论 ， 包 括 : 

1. 平面 设计 基础 知识 : 图 像 类 型 、 图 像 分 辨 率 、 图 像 文件 格式 、 图 像 设计 的 分 类 等 。 
2. 色彩 的 应 用 : 色彩 模式 、 网 页 配色 方案 。 

3. 网 页 的 构图 : 构图 的 视觉 表现 形式 有 哪儿 种 ， 如 何 避 免 构图 中 出 现 的 错误 。 


4. 以 房地产 网 站 首页 设计 详细 介绍 了 网 页 设计 的 流程 。 
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练 习 题 


- 图 像 类 型 有 哪 几 种 ? 各 有 什么 特点 。 

. 图 像 模式 有 哪 几 种 ? 说 出 它们 具体 的 用 途 。 

. 什么 是 图 像 分 辩 率 ? 网 页 图 像 分 辩 率 一 般 是 多 少 ? 
. 请 简 述 网 页 设计 的 工作 流程 。 


一 





上 机 实验 


1. 背景 知识 

本 章 所 学 的 网 页 设计 基本 理论 ， 如 色彩 的 应 用 、 网 页 的 构图 、 网 页 设计 的 工作 流程 等 。 
2. 实验 准备 工作 

保证 Internet 畅通 。 

3. 实验 要 求 


设计 网 站 的 首页 草图 ; 分 析 企 业 的 特点 一 一 面 对 的 客户 群体 、 提 供 的 服务 等 ， 确 定 网 
站 类 型 ， 网 页 构思 ;确定 配色 方案 ;收集 素材 ， 确 定 网 页 构图 ; 最 后 完成 网 站 首页 草图 的 
设计 。 


4. 课时 安排 
上 机 实验 安排 4 课时。 
5. 实验 指导 


网 站 设计 方案 的 确定 : 可 根据 下 面 推荐 的 主题 选择 网 站 主题 或 自 定义 网 站 主题 ， 如 表 
9.1 所 示 。 


表 9.1 推荐 网 站 主题 
美容 时 尚 服饰 品牌 
医疗 保健 食品 饮料 金融 财经 休闲 体育 
交友 社区 | 公司 展示 儿童 宠物 | 汽车 品 









建筑 装饰 


































其 他 部 分 ， 由 学 生 自 





发 挥 ( 略 )。 











第 10 章 ”利用 Flash CC 设计 
网 页 动画 


Flash 是 当前 最 流行 的 交互 式 矢量 制作 软件 ，Flash CC 是 目前 Flash 软件 的 最 新 版 本 ， 
用 它 制作 出 来 的 Flash 动画 具有 极 丰 富 的 表现 力 。Flash CC 可 以 制作 导航 按钮 、 具 有 声音 
效果 的 动画 、MTV 及 整个 Flash 站 点 。 同 时 ，Flash CC 增强 了 网 络 部 分 的 功能 ， 可 以 直接 
通过 XML 读 取 数据 ,又 加 强 了 与 ColdFusion、ASP、JSP 和 Generator 的 整合 , 所 以 用 Flash 
开发 网 络 应 用 程序 肯定 会 越 来 越 广泛 受 欢迎 ， 如 图 10.1 所 示 。 








图 10.1 Flash Professional CC 软件 


本 章 通 过 多 个 Flash CC 实例 进行 由 浅 入 深 的 讲解 ， 重 点 介绍 矢量 图 设计 、 特 效 文 本 处 
理 、 添 加 声音 及 Flash 互 交 设计 的 初步 应 用 。 


【本 章 学 习 目 标 】 

通过 本 章 学 习 ， 读 者 能 够 : 

e 了 解 Flash 的 工作 界面 和 基本 操作 

e 掌握 Flash 中 的 绘图 技巧 、 位 图 操作 与 文本 的 处 理 
e 掌握 Flash 中 的 场景 、 元 件 与 实例 操作 、 图 层 的 管理 
e 了 解 Flash 动画 的 类 型 
e 掌握 如 何 创建 动画 ， 实 现 动 画 的 交互 控制 
e 学 会 Flash 作品 的 设计 与 制作 
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10.1 实例 导 人 和 人: 制作 Flash 网 页 片头 动画 


【 例 10.1】 利用 Flash 技 术 制 作 图 、 文 、 声 并 成 的 Flash 网 页 片头 动画 ， 如 图 10.2 所 示 。 
主要 涉及 以 下 知识 点 : 

1) 进行 画面 布局 
2) 制作 补 间 动 画 

3) 制作 按钮 

4) 载 入 其 他 的 swf 文 件 

5) 添加 ActionScript 脚本 语言 来 创建 交互 界面 
6) 测试 完成 网 页 片头 动画 制作 




















www.wqbook.com 





图 10.2 Flash MTV 


10.2 Flash CC 概述 


10.2.1 Flash 的 工作 界面 


1. “启动 ”界面 

在 启动 Flash CC 时 ， 出 现 “ 启 动 ” 界 面 。 使 用 “启动 ”界面 ， 用 户 可 以 快速 完成 最 常 
的 操作 ， 如 图 10.3 所 示 。 

2. 操作 界面 
主要 由 “菜单 ” 


图 10.4 所 示 。 

















[ 具 、 时 间 轴 、 舞 台 、“ 属 性 ”面板 、 集 成 工作 面板 等 构成 ， 如 
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1) “菜单 ” 栏 : 





有 的 菜单 命令 。 





会 打开 屋 近 的 项 昌 


[DU Adobe Exchange >> 
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他 软件 相同 ，Flash 的 菜单 栏 位 于 界面 的 上 方 ， 包 含 了 Flash 中 所 





图 10.3 ”Flash CC 的 启动 界面 


“菜单 ” 栏 舞台 集成 工作 面板 “属性 ”面板 ”工具 





图 10.4 Flash CC 的 操作 界面 
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2) 时 间 轴 :用 于 组 织 动画 不 同 层 和 不 同 帧 的 面板 , 水 平 的 时 间 轴 代表 动画 的 不 同 阶段 ， 
连续 播放 就 产生 了 动画 。 时 间 轴 的 主要 部 件 是 帧 、 层 、 播 放 磁头 、 状 态 栏 和 标尺 ， 如 图 10.5 
所 示 。 





状态 栏 
图 10.5 时间 轴 


3) 工具 : 里 面 放置 了 可 供 编 辑 图 形 和 文本 的 各 种 工具 ， 利 用 这 些 工具 ,用 户 可 以 方便 
地 进行 绘图 、 修 改 、 移 动 、 缩 放 及 编排 文本 等 操作 ， 如 图 10.6 所 示 。 由 于 工具 较 多 ， 部 分 
工具 被 隐藏 起 来 ， 如 果 工 具 右 下 角 含有 小 箭头 ， 则 表示 还 包含 隐藏 工具 。 工 具 箱 由 以 下 6 
部 分 组 成 : 

e “选择 变换 ”区 域 的 工具 主要 用 于 对 舞台 中 的 元 素 进行 选择 、 变 形 等 操作 ， 包 含 

选择 工具 、 部 分 选取 工具 、 任 意 变 形 工具 、 渐 变 变形 工具 、3D 旋转 工具 、3D 平 
移 工 具 、 套 索 工 具 、 多 边 形 工具 、 魔 术 棒 工 具 。 

e “绘图 ”区 域 的 工具 主要 用 来 绘制 图 形 和 编辑 元 素 形状 ， 包 含 钢笔 工具 、 添 加 销 
点 工具 、 删 除 销 点 工具 、 转 换 销 点 工具 、 文 本 工具 、 线 条 工具 、 算 形 工 具 、 基 本 
矩形 工具 、 椭 圆 工具 、 基 本 椭圆 工具 、 多 角 星 形 工 具 、 铅 笔 工 具 、 画 笔 工 具 。 

e “绘画 调整 ”区 域 的 工具 能 对 所 绘图 形 或 元 件 的 色彩 、 边 线 等 进行 调整 变形 ， 包 
含 骨骼 工具 、 绑 定 工具 、 颜 料 桶 工具 、 墨 水 瓶 工 具 、 滴 管 工 具 、 橡 皮 控 工 具 、 帘 
度 工具 。 

e “视图 ”区 域 的 工具 主要 用 于 舞台 视图 区 域 的 调整 和 大 小 缩放 ， 包 含 手 形 工具 和 
缩放 工具 。 

e “颜色 ”区 域 的 工具 主要 用 于 笔触 颜色 和 填充 颜色 的 编辑 和 设置 。 

e “工具 选项 ”区 域 主要 是 为 了 配合 用 户 使 用 当前 选中 的 工具 进行 的 具体 功能 及 属 
性 的 执行 ， 是 对 工具 功能 的 补充 。 

4) 工作 区 和 舞台 : 舞台 类 似 于 其 他 软件 中 的 画布 , 用 户 可 定义 动画 的 尺寸 和 舞台 的 背 
景 颜色 。 舞 台 以 外 的 深 灰 色 区 域 就 是 工作 区 ， 类 似 于 剧院 的 后 台 ， 可 以 放置 对 象 ， 但 只 有 
舞台 上 的 内 容 才 能 在 最 终 的 动画 中 显示 ， 工 作 区 的 对 象 是 不 显示 的 。 

5) 集成 工作 面板 : 包括 了 很 多 面板 ， 既 可 以 集成 ， 也 可 以 浮动 在 界面 的 任意 位 置 。 

6) “属性 ”面板 : 又 称 为 属性 检查 器 ， 显 示 当 前 选 定 对 象 的 属性 。 
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选择 变换 区 域 


绘画 调整 区 域 


视图 区 域 
戎 色 区 域 


工具 选项 区 域 
图 10.6 工具 


10.2.2 ”Flash 的 基本 操作 
对 Flash 文档 进行 编辑 和 操作 主要 有 以 下 几 个 方面 : 
1. 新 建文 档 


方法 一 : 选择 “文件 ”菜单 一 “新 建 ” 命令， 或 按 下 快捷 键 CtlHN， 弹 出 一 个 对 话 框 ， 
单 击 常规 选项 或 是 模板 选项 ， 选 择 其 中 一 项 后 ， 单 击 “ 确 定 ”按钮 ， 即 创建 一 个 文件 ， 如 
图 10.7 所 示 。 右 侧 出 现 文档 的 属性 ; 宽度 和 高 度 的 尺寸 (默认 为 550X400 像素 )、 帧 频 ( 默 
认为 24fps)、 设 置 的 背景 颜色 等 。 

方法 二 : 单 击 “ 启 动 ” 界 面 中 “新 建 ”选项 中 的 某 一 项 ， 或 是 “从 模板 创建 ”选项 中 
的 某 一 项 ， 例 如 选择 “新 建 ” 选 项 一 “ActionScript 3.0”， 即 创建 了 一 个 新 的 Flash 文档 。 








图 10.7 “新 建文 档 ” 对 话 框 
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本 教材 以 介绍 ActionScript 3.0 为 主 ， 因 此 新 建文 档 时 ， 可 选择 ActionScript 3.0。 
2. 打开 文档 


选择 “文件 ”菜单 一 “打开 ”命令 ， 或 使 用 快捷 键 CurlH+O， 或 单 击 启动 界面 中 打开 最 
近 项 目 中 的 某 个 文档 或 “打开 ”项 。 


3. 保存 文档 


选择 “文件 ”菜单 一 “保存 ”命令 ， 或 使 用 快捷 键 Ctl+S。 文 档 在 编辑 过 程 中 要 及 时 
保存 ，Flash 文档 的 扩展 名 为 .fla。 


4. 发 布 影片 


制作 好 的 Flash 动画 最 终 要 发 布 出 来 或 嵌入 到 网 页 中 。Flash 软件 支持 多 种 能 够 在 网 页 
中 播放 的 文件 格式 。 

发 布 和 测试 Flash 文档 时 ， 常 用 的 方法 有 以 下 两 种 : 

方法 一 : 选择 “文件 ”菜单 一 “导出 ”选项 一 “导出 影片 ”命令 ， 出 现 “ 导 出 影片 ” 
对 话 框 ， 选 择 存储 路 径 ， 单 击 保存 类 型 下 拉 列 表 ， 选 择 文件 格式 为 SWF 影片 格式 ， 命 名 
文件 ， 单 击 “ 保 存 ” 按 钮 。 

方法 二 : 选择 “文件 ”菜单 一 “发 布设 置 ”命令 ， 选 择 发 布 文件 的 格式 及 存储 路 径 ， 
然后 单 击 “ 发 布 ”按钮 ， 如 图 10.8 所 示 。 








图 10.8 ”发 布设 置 对 话 杠 
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10.2.3 ”Flash CC 的 新 功能 

Flash CC 在 以 前 版 本 的 基础 上 增加 了 许多 新 功能 ， 同 时 对 之 前 版 本 的 一 些 陈旧 功能 
行 了 精简 优化 ， 使 得 这 个 版 本 的 用 户 界 面 更 加 流畅 ， 也 更 加 切合 当今 数字 时 代 技 术 的 发 展 
要 求 ， 下 面 将 进行 简单 介绍 。 

1. 全 新 的 64 位 软件 架构 

Flash CC 不 再 支持 32 位 操作 系统 ， 采 用 64 位 架构 ， 更 加 模块 化 ， 并 提供 前 所 未 有 的 
速度 和 稳定 性 。 轻 松 管理 多 个 大 型 文件 ， 发 布 更 加 迅速 ， 提 供 反应 更 加 灵敏 的 时 间 轴 。 

2. 支持 HD 高 清 分 辩 率 

Flash CC 增强 了 显示 效果 ， 从 用 户 界 面 、 图 标 、 字 体 、 舞 台 到 绘图 都 进行 了 改进 ， 显 
示 效 果 更 加 逼真 。 并 且 可 以 把 内 容 导出 为 全 高 清 (HD) 视 频 和 音频 。 即 使 是 从 复杂 的 时 间 表 
或 脚本 驱动 的 动画 导出 ， 也 不 丢 帧 。 

3. 简化 的 用 户 界面 

Flash CC 对 工作 界面 进行 了 全 面 的 简化 和 改进 ， 对 话 框 和 面板 更 直观 和 更 容易 浏览 ， 
运行 也 更 加 流畅 。 默 认 深 灰 色 的 工作 界面 使 用 户 的 注意 力 可 以 更 加 集中 在 工作 区 ， 也 可 以 
选择 浅 色 或 深 色 切 换 的 用 户 界面 。 并 且 新 增 了 定位 到 舞台 中 心 国 的 功能 键 ， 可 使 工作 区 快 
速 返 回 舞 台中 心 位 置 。 

4. Flash CC 和 创意 云 同步 

新 的 Flash CC 内 置 了 访问 每 一 个 未 来 版 本 的 权利 ,支持 云 同 步 设置 ， 可 以 把 用 户 设置 
和 快捷 方式 同步 到 多 台电 脑 上 。 执 行 “ 首 选 参数 ”面板 左 列 的 “同步 设置 ”选项 中 的 “ 立 
即 同步 设置 ”选项 ， 即 可 将 Flash CC 与 Creative Cloud 创意 云 同 步 。 

5. 增强 的 代码 编辑 器 和 查找 替换 功能 

增强 了 ActionScript 编辑 器 的 功能 ， 使 用 新 的 代码 编辑 器 更 有 效 地 编写 代码 ， 内 置 开 
源 的 Scintilla 库 。 使 用 新 的 “查找 和 替换 ”面板 在 多 个 文件 中 搜索 ， 以 更 快 地 更 新 代码 ， 
如 图 10.9 所 示 。 


本 上 
站 巴 

> Actionscript 
PHTMLS Canvas 
> webGL 





图 10.9 ”代码 片段 与 查找 替换 功能 
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6. 使 用 全 新 的 “骨骼 ”工具 进行 反 向 运动 


在 Flash CC 2014 中 取消 了 “骨骼 工具 ”， 而 在 Flash CC 2015 中 又 重新 支持 这 个 强大 
的 动画 运动 编辑 工具 ， 全 新 的 “骨骼 工具 ” 图 可 以 像 以 前 一 样 给 单独 的 元 件 实例 或 在 单 
个 形状 的 内 部 添加 骨骼 。 在 移动 一 个 骨骼 时 ， 与 该 骨骼 相关 的 其 他 链接 骨骼 跟着 移动 ， 创 
建 类 似 于 链 的 动画 效果 。 同 时 新 加 入 了 骨骼 舞台 用 控件 ， 单 击 舞 台 各 个 骨骼 的 控制 点 ， 骨 
骼 就 会 在 锁定 、 打 开 及 限定 这 几 个 状态 之 间 进 行 切换 ， 可 以 清晰 直观 地 反馈 动作 在 舞台 上 
的 调整 要 求 ， 使 用 户 更 加 高 效 地 为 动画 角色 增添 逼真 的 动作 ， 如 图 10.10 所 示 。 

























































图 10.10 全 新 的 骨骼 工具 


7. 使 用 调节 宽度 工具 加 深 笔画 

使 用 Flash CC 中 的 “调节 宽度 工具 ”加 深 笔 画 。“ 宽度 ” 工具 可 让 使 用 者 针对 “舞台 ” 
上 的 绘图 加 入 不 同形 式 和 粗细 的 宽度 。 通 过 加 入 调节 宽度 ， 使 用 者 可 以 轻松 地 将 简单 的 笔 
画 转 变 为 丰富 的 图 案 。Flash CC 可 让 使 用 者 创建 并 存储 宽度 描述 文档 ， 以 便 用 来 将 调节 宽 
度 套用 到 舞台 上 的 绘图 ， 如 图 10.11 所 示 。 

【 例 10.2】 使 用 宽度 工具 完成 花瓶 的 绘制 ， 如 图 10.11 所 示 。 

具体 操作 新建 空 白文 档 ， 在 工具 中 选择 直线 工具 国 ， 绘 制 一 条 竖 线 ， 选 择 宽度 工具 
国 ， 在 坚 线 中 单 击 并 横向 拖 动 光 标 节点 ， 依 次 设置 10 个 不 同 的 节点 并 拖 忠 相应 的 花瓶 宽 
度 ， 完 成 花瓶 的 绘制 。 

8. 实时 绘图 

Flash 之 前 的 版 本 使 用 绘图 工具 在 舞台 上 绘制 图 形 时 , 只 有 形状 的 外 轮廓 可 见 , 释放 时 
才能 看 到 颜色 ， 新 的 版 本 可 以 在 绘制 的 同时 立即 查看 全 部 色彩 ， 设 计 将 比 以 往 任何 时 候 都 
更 直观 和 实用 。 
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图 10.11 宽度 工具 


9. 设置 多 个 图 层 属性 

在 Flash CC 中 新 增 对 多 个 图 层 属性 的 统一 编辑 设置 , 使 用 时 可 以 在 选取 多 个 时 间 轴 图 
层 的 同时 单 击 右键 来 选择 属性 命令 ， 弹 出 “图 层 属性 ”面板 ， 进 行 统一 设置 ， 如 图 10.12 
所 示 。 





图 10.12 “图 层 属性 ”面板 
Flash CC 还 有 很 多 新 增 功能 ， 这 里 就 不 一 一 介绍 了 。 


10.3 ”Flash 的 基本 功能 








Flash 的 基本 功能 主要 包括 绘图 和 填充 、 文 字 处 理 、 创 建 动画 元 件 和 实例 、 使 用 动作 控 
制 内 容 、 添 加 声音 和 集成 电影 等 。 
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10.3.1 绘图 和 填充 


Flash 提供 了 多 种 绘图 和 填充 工具 ， 可 以 用 来 绘制 直线 、 形 状 和 路 径 ， 以 及 进行 编辑 
操作 。 


1. 笔触 与 填充 


单 击 某 个 “绘图 ”工具 时 ， 在 “属性 ”面板 中 可 设置 形状 或 路 径 的 笔触 和 填充 。 

1) “油漆 桶 ”工具 贺 : 填充 图 形 颜色 ， 单 击 “ 油 漆 桶 ”工具 时 ， 在 工具 箱 下 方 的 选项 
区 域 出 现 油漆 桶 的 相应 功能 键 ， 如 图 10.13 所 示 。 

如 果 需 要 更 多 的 填充 效果 ， 选 择 “ 窗 口 ” 菜 单一 “颜色 ”命令 ， 在 “颜色 ”面板 中 可 
选择 类 型 。 填 充 类 型 有 以 下 几 种 : 

e 无 : 删除 填充 。 

e 纯色 : 提供 一 种 纯正 的 填充 单 色 。 单 击 “ 填 充 ” 选 择 框 ， 弹 出 调 色 板 ， 单 击 某 种 

颜色 ， 选 中 该 颜色 ， 或 直接 输入 RGB 值 及 Alpha 值 来 定义 填充 颜色 。 

e 线性 渐变 : 产生 一 种 沿线 性 轨道 混合 的 渐变 。 

e 径 向 渐变 : 产生 一 种 从 中 心 焦点 出 发 沿 环形 轨道 混合 的 渐变 。 

e 位 图 填充 ， 允许 用 可 选 的 位 图 平 铺 所 选 的 填充 区 域 。 

e 当 采 用 渐变 填充 时 ， 要 更 改 渐变 中 的 颜色 ， 选 择 “ 渐 变 定义 栏 ” 下 面 的 某 个 颜色 
指针 ， 双 击 鼠 标 左 键 ， 弹 出 调 色 板 ， 单 击 某 种 颜色 。 拖 动 “ 亮 度 ” 控 件 来 调整 颜 
色 的 亮度 。 当 光标 接近 渐变 栏 时 ， 出现 “十 ”号 , 单 击 可 添加 渐变 颜色 ,如 图 10.14 
所 示 。 











图 10.13 ”油漆 桶 相应 的 功能 图 10.14 纯色 与 渐变 填充 工具 
同时 配合 使 用 工具 中 的 渐变 变形 工具 国 可 以 改变 渐变 填充 的 方向 和 大 小 。 不 同 的 填充 


效果 如 图 10.15 所 示 。 
AAA 
A 


(a) 用 纯 红 色 填 充 。(b) 用 黄 红 径 向 填充 。(c) 线性 渐变 与 渐变 变形 “(qd) 用 位 图 填充 
图 10.15 不 同 的 填充 效果 
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2) “墨水 瓶 ”工具 国 : 改变 绘图 中 线条 和 轮廓 线 的 颜色 及 样式 。 

2. 绘制 基本 几何 形状 

在 Flash 中 使 用 “直线 ”工具 轿 绘 制 直线 ， 使 用 “椭圆 ”工具 图 绘制 椭圆 ， 使 用 “ 算 
形 ” 工 具 圆 绘制 矩形 ， 使 用 “多 角 星 形 ”工具 图 绘制 多 边 形 或 星 形 。 

1) 绘制 直线 : 单 击 “ 直 线 ” 工 具 ， 在 “属性 ”面板 中 设置 笔触 颜色 、 笔 触 高 度 、 笔 触 
样式 。 按 住 Shift 键 ， 绘 制 呈现 的 倾斜 度 为 43$” 倍 数 的 直线 。 

2) 绘制 椭圆 : 单 击 “ 椭 圆 ” 工 具 ， 在 “属性 ”面板 中 设置 笔触 和 填充 颜色 。 在 舞台 上 
拖 动 鼠 标 左 键 绘制 椭圆 , 按 下 Shif 键 , 绘制 正 圆 形 , 按 下 Alt 键 以 当前 点 为 圆心 绘制 圆 形 ， 
快捷 键 可 组 合 使 用 。 

3) 绘制 基本 椭圆 图 :与 “椭圆 ”工具 相似 ， 对 于 绘制 完成 的 椭圆 对 象 ， 可 以 使 用 “ 选 
择 ” 工具 , 拖 动 椭圆 上 的 节点 , 使 其 变 为 任意 形状 的 椭圆 图 形 或 圆 环形 状 , 也 可 以 使 用 “ 属 
性 ”面板 上 的 开始 角度 、 结 束 角度 、 内 径 来 控制 形状 ， 如 图 10.16 所 示 。 










































































图 10.16 绘制 和 编辑 基本 椭圆 

4) 绘制 矩形 : 单 击 “ 和 矩形 ”工具 ， 在 “属性 ”面板 中 设置 笔触 和 填充 颜色 ， 在 舞台 上 

拖 动 鼠标 左 键 绘制 矩形 形状 ， 按 下 Shift 键 绘制 正方 形 ， 按 下 Alt 键 以 当前 点 为 中 心 绘制 矩 
形 ， 快 捷 键 可 组 合 使 用 。 

5) 绘制 基本 矩形， 与 “矩形 ”工具 相似 ， 在 绘制 的 矩形 周围 会 出 现 调节 框 。 对 于 绘制 

完成 的 矩形 对 象 ， 可 以 使 用 “选择 ”工具 ， 拖 动 矩 形 对 象 上 的 节点 ， 使 绘制 的 矩形 对 象 变 

为 任意 形状 的 圆 角 矩形， 也 可 以 使 用 属性 面板 的 和 矩形 选项 编辑 调整 形状 ， 如 图 10.17 所 示 。 





图 10.17 绘制 基本 矩形 





6) 绘制 多 边 形 : 单 击 “多 角 星 形 ” 工 具 ， 在 “属性 ”面板 中 设置 笔触 和 填充 颜色 ， 单 
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击 “ 选 项 ”按钮 ， 弹 出 “工具 设置 ”对 话 框 ， 设 置 样式 (选择 多 边 形 或 星 形 )、 边 数 和 星 形 








图 10.18 ”设置 多 边 形 或 星 形 的 相关 属性 


3. 绘制 曲线 
用 “钢笔 ”工具 图 可 以 绘制 直线 、 光 滑 的 曲线 和 任意 形状 的 图 形 。 单 击 “ 钢 笔 ” 工具， 
在 舞台 上 单 击 可 创建 一 个 节点 ， 连 续 单 击 可 创建 折线 。 在 舞台 上 单 击 并 拖 动 鼠 标 可 创建 曲 








线 ， 用 “部 分 选取 ”工具 选中 节点 ， 出 现 一 个 控制 柄 ， 拖 动 控制 柄 ， 控 制 柄 的 长 度 和 方向 
决定 曲线 的 弯曲 程度 ， 如 图 10.19 所 示 。 


有 


Se NA 


图 10.19 用 “钢笔 ”工具 绘制 折线 和 曲线 


4. 用 “铅笔 ”工具 绘图 


使 用 “铅笔 ”工具 图 ， 绘 画 的 方式 与 使 用 真实 铅笔 大 至 相同 。 要 在 绘画 时 平滑 或 仲 直 
线条 和 形状 ,用户 可 以 给 “铅笔 ”工具 选择 一 种 绘画 模式 。 在 “工具 ”面板 的 “选项 ”区 
域 ， 选 择 一 种 相应 的 “铅笔 ”工具 的 功能 键 。 

1) 选择 “ 伸 直 ”功能 键 圈 ， 绘 制 直线 ， 并 将 接近 三 角形 、 李 圆 、 圆 形 、 矩 形 和 正方 形 
的 形状 转换 为 这 些 常见 的 几何 形状。 

2) 选择 “平滑 ”功能 键 图 绘制 平滑 曲线 。 

3) 选择 “墨水 ”功能 键 国 绘制 不 用 修改 的 手 画 线条 。 

5. 用 “画笔 ”工具 绘图 


“画笔 ”工具 图 能 绘制 出 笔 刷 般 的 笔触 ， 就 像 用 户 在 涂 色 一 样 。 使 用 “画笔 ”工具 功 
能 键 可 以 在 画笔 工具 选项 中 选择 画笔 模式 、 画 笔 大 小 和 形状 ， 还 可 以 配合 压 感 笔 绘 制 出 具 
有 粗细 变化 和 和 斜 度 的 笔触 形象 。 
画笔 模式 包含 标准 绘画 、 颜 料 填充 、 后 面 绘画 、 颜 料 选择 、 内 部 绘画 5 种 模式 。 
“标准 绘画 ”是 覆盖 式 的 普通 绘制 模式 ，“ 颜 料 填充 ”是 指 不 覆盖 边线 的 绘制 模式 ; 
“后 面 绘画 ”是 在 主体 形象 的 背后 绘制 背景 时 使 用 的 绘画 模式 , “颜料 选择 ”是 指 在 指定 选 
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取 区 域 范围 内 绘画 的 模式 ， “内 部 绘画 ”是 指 在 形状 范围 内 的 填 涂 绘制 模式 ， 如 图 10.20 
所 示 。 


AAAA 


标准 绘画 ”颜料 填充 。 后 面 绘画 ”颜料 选择 ”内 部 绘画 
图 10.20 画笔 模式 


画笔 大 小 和 形状 还 可 以 通过 “属性 ”面板 的 画笔 大 小 功能 进行 设置 如 图 10.21 所 示 。 





























图 10.21 “属性 ”面板 中 的 画笔 大 小 与 形状 


6. 对 象 操作 


1) 选取 对 象 : 单 击 “ 选 择 ” 工 具 ， 单 击 舞 台 上 的 任意 对 象 ， 选 中 对 象 ， 按 下 Shift 键 
可 同时 选中 多 个 对 象 。 或 按 住 鼠 标 左 键 ， 在 舞台 上 绘制 一 个 矩形 区 域 ， 选 中 某 个 图 形 的 一 
部 分 。 

2) 调节 直线 和 节点 位 置 : 选中 对 象 后 ， 当 “选择 ”工具 靠近 图 形 的 某 条 边线 时 ，“ 选 
择 ” 工具 的 箭头 处 出 现 一 条 曲线 所 ， 拖 动 边线 变 成 曲线 。 当 “选择 ”工具 靠近 某 个 节点 时 ， 
“选择 ” Rao 可 拖 动 节点 ， 改 变节 点 的 位 置 。 

3) 移动 节点 : 用 “部 分 选择 ”工具 ， 单 击 节点 ， 进 行 拖 动 。 

4) 角 点 、 le 将 角 点 转换 为 曲线 点 时 ， 单 击 角 点 ， 按 住 Alt 键 拖 动 。 
将 曲线 点 转换 为 角 点 时 ， 单 击 “ 钢 笔 ” 工 具 ， 靠 近 曲 线 点 时 ， 钢 笔 工 具 显 示 为 中， 单 击 该 
曲线 点 。 

5) 添加 节点 : 单 击 “钢笔” 工具 , 靠近 线段 要 添加 节点 的 位 置 , 这 时 指针 会 显示 为 S*， 








日 删除 节点 : 单 击 “ 钢 笔 ” 工具， 靠近 节点 的 位 置 ， 这 时 鼠标 指针 会 显示 为 8-， 单 击 。 
7) 调节 路 径 : 单 击 “ 部 分 选择 ”工具 ， 单 击 节点 ， 通 过 调节 控制 柄 的 长 度 和 方向 ， 可 
调节 曲线 。 
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【 例 10.3】 利用 “钢笔 ”工具 绘制 一 条 鱼 。 

操作 步骤 如 下 : 

1) 基本 绘制 ， 导入 参考 图 片 ， 新 建 图 层 ， 单 击 “ 钢 笔 ” 工具 ， 在 舞台 上 单 击 鼠 标 左 键 
创建 第 一 个 节点 。 然 后 顺 着 鱼 的 外 形 找到 形状 转折 点 ， 单 击 鼠 标 左 键 并 拖 动 控制 柄 ， 拉 伸 
直线 为 曲线 。 松 开 鼠 标 ， 继 续 沿 下 一 个 形状 节点 方向 重复 上 一 套 动作 ， 直 至 到 达 第 一 个 节 
点 位 置 ， 单 击 形成 一 条 封闭 的 曲线 。 

2) 调整 节点 : 单 击 “ 部 分 选择 ”工具 ， 单 击 上 方 节点 ， 此 节点 有 一 条 水 平 控制 柄 ， 按 
住 Alt 键 ， 调 节 节点 ， 将 一 条 水 平 控制 柄 调节 为 两 条 控制 柄 ， 拖 动 控制 柄 ， 调 节 控 制 柄 呈 
锐角 。 不 断 调整 细节 ， 达 到 外 形 与 参考 图 一 致 。 

3) 使 用 钢笔 基本 绘制 技法 绘制 鱼 身上 的 曲线 ， 完 成 鱼 斑纹 的 区 域 划分 。 

4) 用 椭圆 工具 绘制 鱼 的 眼睛 ， 并 使 用 工具 中 的 填充 颜色 工具 为 眼睛 上 色 。 

5) 单 击 “油漆 桶 ”工具 ， 在 “颜色 ”面板 中 设置 填充 颜色 为 线性 渐变 ， 选 择 不 同 的 过 
渡 颜 色 ， 在 舞台 封闭 区 域 单 击 加 以 填充 ， 并 配合 渐变 变形 工具 调整 填 色 方 向 ， 最 后 单 击 工 
具 中 的 笔触 色彩 ， 选 择 线条 为 无 回 以 去 除 边线 ， 完 成 绘制 ， 如 图 10.22 所 示 。 


ER @@. 


图 10.22 利用 “钢笔 ”工具 绘制 一 条 鱼 
































画 











7. 缩放 和 旋转 对 象 

选中 对 象 后 ， 缩 放 和 旋转 对 象 的 常用 方法 有 以 下 三 种 : 

方法 一 : 单 击 “ 任 意 变形 ”工具 国 ， 选 择 工具 箱 下 方 的 “选项 区 域 ” 相 应 的 功能 按钮 ; 
旋转 与 倾 征 图、 缩放 图、 扭曲 圆 和 封套 圈 ， 可 对 图 形 进行 变形 。 

1) 缩放 : 拖 动 控制 点 可 改变 图 形 的 高 度 或 宽度 ， 按 住 Shift 键 ， 可 成 比例 缩放 。 

2) 倾斜 : 当 光 标 靠近 中 间 控 制 点 时 ， 出 现 一 个 双向 箭头 ， 拖 动 双 向 箭头 ， 就 会 产生 倾 
斜 效果 。 

3) 扭曲 : 用 光标 拖 动 某 个 节点 ， 就 会 产生 扭曲 效果 。 

4) 封套 : 允许 用 户 弯 曲 或 扭曲 对 象 。 封 套 是 一 个 边框 ， 其 中 包含 一 个 或 多 个 对 象 。 更 
改 封 套 的 形状 会 影响 该 封套 内 对 象 的 形状 ,通过 调整 封套 的 点 和 切线 手柄 来 编辑 封套 形状 ， 
变形 后 的 效果 如 图 10.23 所 示 。 


< 2 


倾斜 与 旋转 扭曲 封套 
图 10.23 甜 形 变形 后 的 效果 

















第 10 章 利用 Flash CC 设计 网 页 动画 人 


方法 二 : 选择 “修改 ”菜单 一 “变形 ”选项 一 某 个 变形 命令 ， 如 图 10.24 所 示 。 
方法 三 : 选择 “窗口 ”菜单 一 “变形 ”命令 ， 打开“ 变形” 面板， 设置 变形 比例 、 旋 
转 、 倾 斜 等 ， 如 图 10.25 所 示 。 






Cu) 


甘 搁 为 位 图 (8) 
位 图 (W) 
元 件 (S) 
形状 (pP) 
合并 对 象 (0) 


VY {SB 

担 曲 (D) 

BE(E) 

绽放 (5) 

放大 与 全 和 (R) 

纵 放 和 族 转 (C)- Curl+Alt+S 
顺 时 针 禾 转 90 度 (0) Cerl+Shit+9 
逆 时 村 族 转 90 度 @) 。。 Cl+Shif+7 


委 丰 翻转 (V) 





图 10-24 “修改 ”菜单 中 的 变形 工具 

8. 辅助 工具 的 使 用 

在 绘图 过 程 中 ,为 了 精确 ， 经 常会 用 到 辅助 绘图 工具 ,例如 “缩放 ”工具 国 、“ 手 形 ” 
工具 国 、 网 络 、 标 尺 、 辅 助 线 等 。 操 作 步 骤 如 下 选择 “视图 ”菜单 中 的 “网 络 ”、“ 标 
尺 ”、“ 辅 助 线 ” 命 令 。 

9. 排列 、 对 齐 、 组 合 和 取消 组 合 

1) 排列 

选中 对 象 ， 选择“ 修改 ”菜单 一 “排列 ”选项 一 某 种 排列 命令 ,改变 对 象 的 层 全 顺序。 

2) 对 齐 

选中 多 个 对 象 ， 选 择 “窗口 ”菜单 一 “对 齐 ” 命 令 ， 打 开 “ 对 齐 ” 面 板 ， 然 后 单 击 
个 对 齐 方式 按钮 ， 如 图 10.26 所 示 。 


a 
小 





图 10.26 “对 齐 ” 面 板 
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3) 组 合 和 取消 组 合 

使 用 “组 合 ” 命 令 ， 可 将 多 个 元 素 作为 一 个 对 象 来 处 理 。 选 中 多 个 对 象 ， 选 择 “ 修 改 ” 
菜单 一 “组 合 ” 命 令 ， 将 多 个 对 象 组 合 为 一 组 ，Ctl+tG 为 “组 合 ”的 快捷 方式 。 选 中 一 组 
对 象 ， 选 择 “ 修 改 ” 菜 单一 “取消 组 合 ”命令 ， 恢 复 为 多 个 单个 对 象 。 也 可 以 在 选中 对 象 
的 状态 下 单 击 右键 ,选择 “分 散 ” 以 执行 取消 组 合 命令 ， 如 图 10.27 所 示 。 




















组 合 (G) Cirl+G 
取 满 担 合 (U) Ctrl+Shift+G 


图 10.27 “组 合 ”与 “取消 组 合 ” 

【 例 10.4】 利用 Flash 基本 工具 绘制 灯笼 ， 综 合 利用 填充 、 变 形 、 辅 助 工具 等 。 

操作 步骤 如 下 : 

1) 新 建 一 个 文档 ， 单 击 “ 和 矩形 ”工具 ， 选 择 “ 窗 口 ”菜单 一 “颜色 ”命令 ,设置 填充 
为 黄 红 放射 性 渐变 ， 笔触 颜色 为 黑色 ， 高 度 为 2， 样 式 为 实 线 。 在 舞台 上 ， 绘 制 一 个 矩形 ， 
单 击 “ 选 择 ” 工 具 ， 选 中 顶部 和 底部 的 边框 线 ， 按 下 Del 键 ， 进 行 删除 ， 用 “选择 ”工具 
单 击 和 矩形 左 侧 的 边框 线 ， 然 后 按 下 Alt 键 ， 拖 动 线段 ， 复 制 此 线段 ， 同 理 继续 复制 线段 ， 
共 复 制 了 7 条 线段 。 按 下 Shift 键 ， 依 次 选中 这 7 条 线段 及 两 边 的 垂直 边框 ， 选 择 “ 窗 口 ” 
菜单 一 “对 齐 ” 命 令 ， 打开“ 对 齐 ” 面 板 ， 注 意 不 要 选中 “相对 于 舞台 ”， 单 击 对 齐 中 的 
“ 顶 对 齐 ” 按 钮 ， 再 单 击 分 布 中 的 “水 平 居中 分 布 ” 按 钮 ， 注 意 左 右 对 称 。 

2) 选择 “视图 ”菜单 一 “标尺 ”命令 ， 舞 台 左 侧 和 上 侧 出 现 标 尺 。 单 击 “ 选 择 ” 工具， 
指向 标尺 处 ， 按 住 鼠标 左 键 拖 动 ， 拖 出 辅助 线 ， 辅 助 线 为 亮 绿色 线条 ， 拖 出 多 条 辅助 线 ， 
注意 辅助 线 左 右 、 上 下 对 称 ， 如 图 10.28(a) 所 示 。 

3) 选中 全 部 对 象 ， 单 击 “ 任 意 变 形 ” 工 具 ， 选 择 选项 区 域 中 的 “封套 ”功能 键 ， 按 住 
左 侧 中 间 的 一 个 方形 句柄 ， 向 左 拖 动 ， 到 达 辅 助 线 交 叉 位 置 ， 同 样 ， 右 侧 也 进行 这 样 的 自 
由 变换 ， 如 图 10.28(b) 所 示 。 

4) 这 一 步 比 较 关 键 , 注意 图 中 特别 标识 的 方向 线 控制 点 , 按 住 拖 动 到 辅助 线 交 叉 位 置 ， 
如 图 10.28(c) 所 示 。 

5) 最 后 再 添加 一 些 装 饰 ， 绘 制 两 个 矩形 ， 作 为 灯笼 的 底座 。 选 中 全 部 对 象 ， 选 择 “ 修 
改 ” 菜 单一 “组 合 ” 命 令 。 至 此 灯笼 制作 完成 ， 如 图 10.28(d) 所 示 。 
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(a) 拖 出 多 条 辅助 线 (b) 进行 自由 变换 





(c) 拖 动 方向 控制 点 (d) 制作 完成 的 灯 算 
图 10.28 绘制 灯笼 


【 例 10.5】 绘制 图 形 综合 实例 米 老鼠 头像 ， 综 合 运 用 绘图 工具 、 填 充 与 线条 、 选 择 
工具 等 。 

操作 步骤 如 下 : 

1) 利用 椭圆 工具 绘制 若干 个 椭圆 ， 最 项 端 两 个 圆 填充 为 黑色 ， 如 图 10.29(a) 所 示 。 

2) 修剪 线段 ， 形 成 米 老鼠 的 轮廓 ， 如 图 10.29(b) 所 示 。 

3) 绘制 直线 ， 用 选择 工具 将 直线 调整 为 曲线 ， 利用 椭圆 工具 绘制 米 老鼠 的 鼻子 和 眼睛 。 

4) 利用 钢笔 工具 ， 绘 制 米 老鼠 的 嘴巴 、 舌 头 、 下 巴 ， 如 图 10.29(c) 所 示 。 

5) 最 后 填充 颜色 , 舌头 为 红色 ， 皮肤 为 粉色 ， 头 发、 眼睛 、 鼻 子 为 黑色 ， 如 图 10.29(d) 
所 示 。 








(b) (9) 
图 10.29 绘制 米 老鼠 头像 


10.3.2 ”位 图 操作 


1. 导入 位 图 
Flash 不 仅 可 以 绘制 各 种 形状 的 矢量 图 形 , 也 可 以 导入 多 种 格式 的 位 图 ， 如 JPG、GIF、 
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PNG 格式 等 。 

选择 “文件 ”菜单 一 “导入 ”选项 一 “导入 到 有 舞台” 命令， 直接 将 位 图 导入 到 舞台 中 。 
选择 “导入 到 库 ” 命 令 ， 则 将 位 图 导入 到 “ 库 ” 面 板 中 ， 并 不 在 舞台 中 出 现 。 

2. 使 用 位 图 填充 

使 用 已 导入 的 位 图 可 以 对 绘制 好 的 图 形 进行 填充 。 在 “颜色 ”面板 中 ， 单 击 “ 颜 色 类 
型 ”下 拉 框 ， 选 择 位 图 填充 时 ， 已 导入 的 位 图 将 显示 在 下 方 的 列表 区 域 ， 选 择 某 个 位 图 ， 
如 图 10.30 所 示 。 如 果 列 表 区 域 没有 所 需 的 位 图 ， 单 击 “ 导 入 ”按钮 ， 弹 出 “导入 到 库 ” 
对 话 框 ， 如 图 10.30 所 示 ， 选 择 本 地 计算 机 上 的 位 图 ， 将 其 添加 到 库 中 。 
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图 10.30 ”使 用 位 图 


3. 分 离 位 图 

在 舞台 中 导入 一 幅 位 图 后 ， 不 能 直接 进行 编辑 。 例 如 ， 用 “和 套 索 ”工具 去 除 位 图 的 背 
景 是 无 法 操作 的 ， 只 有 分 离 位 图 后 才能 操作 。 操 作 步 又 如 下 : 

1) 导入 一 幅 位 图 到 舞台 中 , 或 将 已 导入 库 中 的 位 图 拖 入 到 舞台 中 , 单 击 当前 场景 中 的 
位 图 。 

2) 选择 “修改 ”菜单 一 “分 离 ” 命 令 ， 或 按 下 组 合 键 CtrHHB。 分 离 后 位 图 成 点 状 
显示 。 

3) 单 击 “ 套 索 ” 工 具 图， 在 “工具 ”面板 的 “选项 ”区 域 ， 选 中 魔术 棒 国 ， 并 设置 
魔术 棒 参数 ， 单 击 选中 图 像 的 背景 ， 按 下 Del 键 删除 ， 如 图 10.31 所 示 。 











图 10.31 去 除 位 图 背景 及 转换 位 图 为 矢量 图 
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4. 将 位 图 转换 为 矢量 图 


将 位 图 转换 为 矢量 图 后 ， 就 可 以 将 图 像 当 作 矢 量 进行 处 理 。 与 位 图 相 比 ， 一 般 矢量 图 
文件 较 小 ， 因 此 有 利于 减少 Flash 文件 的 大 小 。 将 位 图 转换 为 矢量 图 的 操作 步骤 如 下 : 

选中 当前 场景 中 的 位 图 ， 选 择 “ 修 改 ” 菜 单一 “位 图 ”选项 一 “转换 位 图 为 矢量 图 ” 
命令 ， 弹 出 “转换 位 图 为 矢量 图 ”对 话 框 ， 如 图 10.31 所 示 。 

1) “颜色 阔 值 ”: 输入 一 个 介 于 1 和 500 之 间 的 值 。 颜 色 阔 值 越 大 ， 越 会 降低 转换 
为 矢量 图 后 的 颜色 数量 。 

2) “最 小 区 域 ”: 输入 一 个 介 于 1 和 1000 之 间 的 值 。 用 于 设置 在 指定 像素 颜色 时 要 
考虑 的 周围 像素 的 数量 。 

3) 对 于 “ 角 闵 值 ”， 从 下 拉 菜 单 中 选择 一 个 选项 ， 以 确定 是 保留 锐 边 还 是 进行 平滑 
处 理 。 

4) 对 于 “曲线 拟 合 ”， 从 下 拉 菜 单 中 选择 一 个 选项 , 用 于 确定 绘制 的 轮廓 的 平滑 程度 。 




















yY 注 意 : 
如 果 位 图 颜色 很 复杂 , 如 高 清晰 度 的 照片 或 风景 图 ,转换 为 矢量 图 时 反而 文件 更 大 了 ， 
可 采用 压缩 位 图 品质 的 方法 来 解决 。 


10.3.3 ”处 理 文本 


在 Flash 中 ， 文 本 和 矢量 图 形 一 样 是 必 不 可 少 的 。Flash 文本 的 特效 设计 会 为 Flash 动 
画 增色 不 少 。 

Flash 文本 的 类 型 分 为 三 种 :静态 文本 字段 、 动 态 文本 字段 和 输入 文本 字段 。 在 Flash 
动画 中 既 可 创建 包含 静态 文本 的 文本 块 ， 即 在 创作 文档 时 确定 内 容 和 外 观 的 文本 :也 可 创 
建 动态 或 输入 文本 字段 。 动 态 文本 字段 显示 动态 更 新 的 文本 ， 如 体育 得 分 或 股票 报价 等 ; 
另外 还 可 创建 输入 文本 字段 ， 允 许 用 户 为 表单 、 调 查 表 或 其 他 目的 输入 文本 。 本 小 节 主 要 
介绍 静态 文本 的 处 理 。 

1. 输入 文本 

单 击 “ 文 本 ”工具 国 ， 在 “属性 ”面板 中 设置 文本 属性 ， 将 鼠标 移动 到 舞台 上 单 击 ， 
出 现 一 个 文本 框 ， 光 标 在 该 文本 框 中 闪烁 ， 输 入 文本 ， 如 果 换 行 ， 按 回 车 键 。 文 本 输入 后 ， 
用 鼠标 在 文本 框 以 外 任意 处 单 击 ， 完 成 文本 的 输入 。 

文本 输入 完毕 后 ， 如 果 想 修改 文本 ， 再 次 单 击 “ 文 本 ”工具 ， 在 文本 框 处 单 击 文本 ， 
进行 编辑 。 

2. 设置 文本 属性 

在 输入 文本 前 ， 单 击 “ 文 本 ”工具 ， 在 “属性 ”面板 中 设置 文本 属性 ， 然 后 输入 文本 ， 
或 输入 文本 后 单 击 “ 选 择 ” 工 具 ， 选 中 文本 ， 在 “属性 ”面板 中 设置 文本 属性 。 可 设置 文 
本 的 字体 、 字 号 、 样 式 、 颜 色 及 段落 的 对 齐 方式 、 边 距 、 缩 进 和 行 间距 ， 还 可 为 文本 添加 
链接 路 径 ， 如 图 10.32 所 示 。 
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图 10.32 设置 文本 属性 
还 可 以 对 文本 进行 旋转 、 缩 放 、 人 和 倾斜 和 翻转 等 变形 。 














注意 : 

可 选中 文本 块 中 的 部 分 文本 ， 设 置 文本 的 属性 。 

3. 将 文本 转换 为 形状 

在 文本 框 中 输入 文本 后 ， 文 本 是 一 个 整体 的 文本 块 。 要 想 对 单个 文字 进行 处 理 ， 可 以 
将 文本 块 中 的 文本 分 离 成 单独 的 文本 块 ， 并 可 以 将 这 些 单独 的 文本 块 分 布 到 各 个 独立 的 层 
中 ， 从 而 轻松 地 为 每 个 单独 的 文本 块 创建 动画 。 要 重新 调整 文字 的 形状 ， 必 须 将 其 转换 为 
相应 的 线条 和 填充 ， 即 分 离 文 本 。 

【 例 10.6】 将 文本 转换 为 形状 ， 如 图 10.33 所 示 。 

操作 步骤 如 下 : 

1) 单 击 “ 文 本 ”工具 ， 输 入 文本 ， 如 图 10.33(a) 所 示 。 单 击 “ 选 择 ” 工 具 ， 单 击 文本 
块 ， 选 中 文本 块 ， 选 择 “修改 ”菜单 一 “分 离 ” 命 令 ， 或 按 下 组 合 键 CtlHB， 每 个 字符 都 
将 分 离 出 来 , 变 成 只 包含 一 个 字符 的 文本 块 。 文 本 在 舞台 上 的 位 置 不 变 , 如 图 10.33(b) 所 示 。 

2) 选择 “修改 ”菜单 一 “分 离 ” 命 令 ， 选 定 的 文本 就 会 被 转换 为 形状 。 

3) 转换 后 的 文本 就 是 矢量 图 ， 可 对 每 一 个 文字 进行 修饰 ， 单 击 “ 选 择 ” 工具， 选中 文 
本 ， 单 击 Bie 工具 ， 填 充 红 一 黄 一 蓝 一 绿 一 紫 线性 渐变 。 单 击 “ 部 分 选择 ”工具 ， 
单 击 某 个 文字 ， 修 改 文字 的 路 径 ， 如 图 10.33(c) 所 示 。 


动画 动画 列 苞 


(a) 文本 块 四 文本 第 -次 分 高， 成 为 单个 字符 (Q) 再 次 分 离 ， 成 为 形状 
图 10.33 ”将 文本 转换 为 形状 


【 例 10.7】 制作 彩色 镁 空 特效 文字 。 

操作 步骤 如 下 : 

1) 单 击 “ 文 本 ”工具 ， 输 入 文本 ， 按 下 CtlHB 组 合 键 ， 将 文本 转换 为 单个 字符 ， 再 
按 下 Ctrl+B 组 合 键 ， 将 文本 转换 为 矢量 图 。 


二 
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2) 单 击 “ 黑 水瓶 ”工具 ， 在 “颜色 ”面板 中 单 击 “ 笔 触 颜 色 ”， 设 置 笔触 填充 效果 为 














文本 块 第 一 次 分 离 为 单个 字符 再 次 分 离 为 形状 后 描 边 ， 删 除 填充 
图 10.34” 镁 空 特 效 字 的 制作 


10.4 ”应 用 Flash CC 设计 动画 


使 用 Flash 制作 动画 影片 的 流程 一 般 是 先 制作 动画 中 所 需 的 各 种 元 件 ， 然 后 在 舞台 中 
使 用 (被 称 为 实例 )， 进 行 适当 的 组 织 编排 。 在 这 个 过 程 中 可 以 添加 声音 ， 可 以 使 用 动作 使 
Flash 影片 能 够 响应 特定 事件 ， 从 而 获得 交互 效果 。 影 片 制作 完成 后 ， 将 其 导出 为 一 个 可 嵌 
入 网 页 的 SWF 格式 的 文件 。 因 此 ， 元 件 是 Flash 中 用 得 最 多 的 对 象 。 本 节 将 通过 一 系列 的 
实例 介绍 Flash 动画 的 制作 方法 和 技巧 ,使 学 生 能 够 掌握 Flash 动画 制作 的 原理 和 方法 ,最 
主要 的 是 培养 创造 性 的 设计 能 力 。 


10.4.1 场景、 元 件 与 实例 


1. 使 用 场景 


当 Flash 文件 很 复杂 时 ， 需 要 很 多 场景 ， 并 且 每 个 场景 中 的 对 象 可 能 都 不 同 ，Flash 可 
以 将 多 个 场景 中 的 动作 组 合成 一 个 连贯 的 电影 。SWF 文件 中 的 场景 将 按照 在 “场景 ”面板 
中 所 列 的 顺序 依次 播放 。 

1) 添加 场景 选择 “插入 ”菜单 一 “场景 ”命令 ,或 在 “窗口 ”菜单 一 “场景 ”面板 
中 单 击 “ 添 加 场景 ”图 按钮 。 

2) 复制 场景 :在 “场景 ”面板 中 选择 需要 复制 的 场景 ， 单 击 “ 复 制 场景 ” 圈 按 钮 。 

3) 调整 场景 顺序 : 在 “场景 ”面板 中 单 击 场景 层 ， 上 下 拖 动 即 可 调整 场景 的 播放 顺序 。 

4) 删除 场景 : 在 “场景 ”面板 中 单 击 “ 删 除 场景 ”图 按钮 。 

5) 快速 切换 场景 ， 在 舞台 右上 方 处 ， 单 击 国 打开 场景 选择 菜单 ， 可 快速 切换 场景， 
如 图 10.35 所 示 。 





图 10.35 场景 设置 
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2. 元 件 和 实例 

元 件 是 存放 在 库 中 的 可 反复 取 用 的 图 形 、 动 画 、 按 钮 和 音频 。 当 用 户 创建 元 件 时 ， 元 
件 就 存储 在 文件 的 “ 库 ” 面 板 中 ，“ 库 ”面板 对 元 件 进行 有 效 的 组 织 和 管理 ， 还 可 建立 文 
件 夹 ， 将 元 件 分 类 存放 在 文件 夹 中 。 将 元 件 从 库 中 拖 入 舞台 ， 就 生成 了 实例 。 元 件 的 类 型 
有 图 形 园 、 影 片 章 辑 国 、 接 包 国 三 种 。 

1) 图 形 : 可 反复 取 用 的 图 片 ,用 于 构建 动画 主 时 间 轴 上 的 内 容 ， 所 呈现 的 元 素 以 静态 
图 片 为 主 。 不 能 对 图 形 添加 交互 行为 和 声音 控制 。 

2) 影片 剪辑 ， 可 反复 取 用 的 一 段 小 动画 。 可 独立 于 主 时 间 轴 进行 播放 。 可 以 用 
ActionScript 语言 进行 控制 ， 但 不 能 对 鼠标 事件 做 出 响应 。 

3) 按钮 : 用 于 创建 动画 的 交互 控制 按钮 。 可 响应 事件 ， 添 加 交互 动作 。 


3. 创建 元 件 











方法 一 : 选中 场景 中 的 对 象 ， 选 择 “ 修 改 ” 菜 单一 “转换 为 元 件 ”命令 ， 或 按 下 快捷 
键 F8， 弹 出 “转换 为 元 件 ” 对 话 框 ， 输 入 名 称 ， 选 择 类 型 ， 单 击 “ 确 定 ”按钮 。 

方法 二 : 选择 “插入 ”菜单 一 “新 建 元 件 ” 命 令 ， 或 单 击 “ 库 ”面板 下 方 的 “新 建 元 
件 ” 按 乌 图， 弹出 “新 建 元 件 ”对 话 框 ， 如 图 10.36 所 示 。 输 入 名 称 和 选择 类 型 ， 单 击 “ 确 
定 ” 按 钮 ， 进 入 元 件 的 编辑 界面 。 





图 10.36 “创建 新 元 件 ” 对 话 框 
方法 三 : 在 舞台 中 选 定 对 象 ， 单 击 鼠 标 右键 后 弹出 对 话 框 ， 选择“ 转换 为 元 件 ” 选 项 。 


4. 编辑 和 使 用 元 件 

1) 编辑 元 件 ， 打开 “ 库 ” 面 板 ， 选 中 某 个 元 件 ， 双 击 鼠 标 左 键 ， 进 入 到 元 件 的 编辑 状 
态 ; 或 在 舞台 中 双击 实例 ， 进 入 元 件 的 编辑 状态 。 

2) 使 用 元 件 : 元 件 创 建 后 ， 就 会 保存 在 “ 库 ” 面 板 中 ， 选 择 “ 窗 口 ” 菜 单一 “ 库 ” 命 
令 ， 或 按 下 CtrltL 组 合 键 或 F11 键 ， 打开“ 库 ” 面 板 ， 选 中 元 件 后 拖 至 舞台 中 。 

3) 实例 的 应 用 : 元 件 拖 放 到 舞台 中 之 后 ， 即 称 为 实例 。 在 “属性 ”面板 中 ， 可 对 实例 
进行 相应 的 属性 设置 ， 不 同 的 元 件 属性 也 有 细微 的 不 同 。 例 如 ， 图 形 元 件 的 属性 主要 有 位 
置 大 小 、 色 彩 效果 和 循环 状态 。 影 片 剪辑 元 件 的 属性 主要 有 实例 命名 、 位 置 和 大 小 、3D 定 
位 和 视图 、 色 彩 效 果 、 显 示 、 辅 助 功能 、 滤 镜 。 而 按钮 元 件 除了 包含 部 分 通用 属性 外 ， 还 
添加 了 字 距 调整 等 属性 ， 如 图 10.37 所 示 。 

















第 10 章 利用 Flash CC 设计 网 页 动画 。177。 





图 10.37 设置 元 件 的 属性 


10.4.2 ” 帧 与 关键 帧 


Flash 动画 是 由 多 帧 组 成 的 。 帧 就 是 动画 在 播放 过 程 中 ， 不 同时 间 内 动画 内 容 的 载体 。 
帧 分 为 普通 帧 、 关 键 帧 、 空 白 关 键 帧 ， 如 图 10.38 所 示 。 

1) 关键 帧 : 定义 了 动画 变化 的 帧 ， 也 可 以 说 是 包含 了 帧 动作 的 帧 。 在 时 间 轴 上 是 一 个 
实心 的 小 黑 点 。 

2) 空白 关键 帧 ; 没有 内 容 的 关键 帧 。 在 时 间 轴 上 是 一 个 空心 的 小 圆圈 。 

3) 普通 帧 : 又 称 为 相同 帧 ， 与 前 一 个 关键 帧 的 内 容 相同 ， 是 灰色 的 帧 。 

4) 过 渡 帧 : 两 个 关键 帧 之 间 定 义 了 动画 的 紫 蓝 色 的 帧 ， 它 使 得 动画 过 程 更 流畅 。 


普通 帧 
空白 关键 由 
关键 帧 
过 渡 帧 





图 10.38 ” 帧 及 关键 帧 


10.4.3 图 层 

图 层 的 类 型 根据 不 同 的 动画 内 容 和 制作 特点 来 区 分 ， 用 于 有 效 地 组 织 动画 元 素 ， 使 元 
素 之 间 不 至 于 相互 干扰 ， 更 加 清晰 有 效 地 设计 与 制作 动画 ， 如 图 10.39 所 示 。 

1. 图 层 的 分 类 

1) 普通 层 : 当 创 建 一 个 新 的 Flash 文档 后 ， 它 就 包含 一 个 普通 层 ， 普 通 层 是 Flash 中 
应 用 最 多 的 图 层 。 

2) 引导 层 : 利用 引导 层 可 以 制作 沿路 径 运动 的 动画 。 

3) 遮 日 层 ， 遮 住 下 方 图 层 的 内 容 ， 透 过 建立 的 矢量 图 形 可 以 看 见 下 方 图 层 的 内 容 。 

2. 图 层 的 操作 

1) 插入 图 层 : 在 时 间 轴 的 左下 方 单 击 “ 插 入 图 层 ” 按 钮 国 ， 就 添加 了 一 个 普通 层 ， 单 
击 “ 添 加 引导 层 ” 按 钮 ， 就 添加 了 一 个 引导 层 。 

2) 改变 图 层 的 属性 : 选中 一 个 或 多 个 图 层 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 
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“属性 ”命令 ， 弹 出 “属性 ”对 话 框 ， 设 置 图 层 的 属性 。 

3) 插入 图 层 文件 夹 : 将 图 层 分 类 放 在 文件 夹 中 进行 组 织 管理 。 

4) 不 需要 图 层 时 ， 单 击 “ 删 除 图 层 ” 按 钮 。 

5) 图 层 的 显示 或 隐藏 : 单 击 图 层 ， 单 击 眼睛 图 标 位 置 ， 出 现 又 ， 表 示 隐 藏 ， 黑 色 圆 点 
表示 显示 。 

6) 图 层 的 锁定 : 单 击 图 层 ， 单 击 锁定 层 的 下 方 ， 出 现 锁 的 标志 ， 表 示 锁 定 层 ， 黑 色 圆 
点 表示 解锁 。 

















图 10.39 图 层 的 类 型 


10.4.4 创建 动画 

用 户 通 过 改变 连续 帧 的 内 容 来 实现 动画 ， 例 如 穿梭 移动 、 放 大 或 缩小 、 旋 转 、 变 色 、 

有 三 种 方法 可 以 在 Flash 中 创建 动画 序列 ， 分 别 是 创建 补 间 动 画 、 创 建 补 间 形 状 、 创 
建 传统 补 间 。 

1. 帧 并 帧 动画 

要 创建 帧 并 帧 动画 ， 必 须 为 每 一 帧 都 定义 关键 帧 ， 并 且 修 改 关 键 帧 中 的 内 容 。 

【 例 10.8】 制作 帧 并 帧 动画 ， 如 图 10.40 所 示 。 

制作 过 程 如 下 : 

动画 设计 概念 : 本 次 动画 设计 模拟 书写 文字 的 动作 过 程 ， 完 成 的 动画 效果 是 在 空白 的 
羊皮 纸 上 逐 步 按 笔顺 出 现 文字 的 过 程 。 整 个 动画 采用 文字 反 向 擦 除 的 方式 制作 逐 帧 动画 ， 
最 后 翻转 回 正常 的 顺序 播放 ， 就 可 以 完成 文字 从 无 到 有 的 书写 过 程 。 

1) 新 建 一 个 文档 ， 导 入 一 张 背景 -一 羊皮 纸 位 图 素材 到 舞台 ， 以 位 图 素材 为 背景 ， 并 
在 时 间 轴 上 第 60 帧 单 击 插入 帧 ， 锁定 该 图 层 并 始终 置 于 最 下 层 。 单 击 时间 轴 左下 角 的 “新 
建 图 层 ” 按 钮 ， 新 建 一 个 图 层 ， 使 用 字体 工具 国 在 新 建 的 图 层 中 键入 “Monday” 英 文 单 
词 。 在 “属性 ”面板 中 选择 字体 颜色 为 白色 、 字体 大 小 为 96 号 字 、 字体 样式 为 “Segoe Print” 
或 其 他 手写 风格 的 英文 字体 。 然 后 参考 【 例 10.6】 中 编辑 字体 的 办 法 将 英文 字体 两 次 分 离 
成 打 散 的 矢量 图 形 ， 如 图 10.40(a) 所 示 。 

2) 在 文字 图 层 时 间 轴 的 第 2 帧 单 击 ， 插 入 关键 帧 ， 使 用 橡皮 擦 工具 E， 选 择 大 号 加 
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形 笔 刷 头 ， 按 照 书写 顺序 往 回 控 除 文字 最 后 的 笔顺 ， 即 右 下 角 “y” 字母 的 尾部 图 形 ， 一 次 
探 除 两 个 笔 刷 的 长 度 ， 如 图 10.40(b) 所 示 。 

3) 在 文字 图 层 的 时 间 轴 上 按 下 F6 快捷 键 ， 在 第 3 帧 插入 关键 帧 ， 和 前 一 步骤 相同 ， 
继续 使 用 橡皮 擦 工具 ， 继 续 往 回 擦 除 两 个 笔 刷 的 长 度 。 

4) 不 断 重复 之 前 的 步 又， 每 新 建 一 个 关键 帧 ， 就 反 向 擦 除 一 段 文字 ， 直 至 60 帧 完全 
控 除 文字 图 形 ， 完 成 逐步 消失 的 文字 动画 过 程 ， 如 图 10.40(c) 至 图 10.40(e) 所 示 。 

5) 在 文字 图 层 “ 字 ”上 单 击 ， 全 部 选择 60 帧 动画 ， 单 击 右键 打开 面板 ， 选 择 “ 翻 转 
帧 ”命令 ， 使 逐 帧 动画 从 后 到 前 反 向 播放 ， 如 图 10.40( 有 所 示 。 











图 10.40 写字 逐 帧 动画 步骤 


6) 测试 发 布 , 将 文件 保存 为 SWE 格式 ， 至 此 动画 制作 完成 ,显示 效果 如 图 10.41 所 示 。 





图 10.41 ”写字 逐 帧 动画 效果 
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2. 传统 补 间 动 画 

传统 补 间 动 画 是 先 在 时 间 轴 上 的 不 同时 间 点 定好 关键 帧 (每 个 关键 帧 都 必须 是 同一 个 
元 件 )， 之 后 在 关键 帧 之 间 选 择 传 统 补 间 ， 动 画 就 形成 了 。 这 是 最 基本 的 点 对 点 移动 变化 。 

【 例 10.9】 利用 传统 补 间 动 画 制 作 跳 动 的 字符 ， 如 图 10.42 所 示 。 效 果 为 字符 沿 镜面 
垂直 向 上 移动 。 








分 离 文本 块 ， 转 换 为 独立 的 元 件 中 间 关 键 帧 上 移 





复制 并 镜像 旋转 ， 修 改 属 性 色彩 效果 测试 播放 效果 
图 10.42 跳动 的 字符 


制作 过 程 如 下 : 

1) 新 建 一 个 文档 ， 背 景 颜 色 为 灰 粉 色 (#CC9999)。 单 击 “ 和 矩形 ”工具 ， 在 “属性 ” 面 
板 中 设置 填充 为 深蓝 色 (#000033)， 绘 制 一 个 和 矩形， 占据 舞台 的 下 半 部 分 ， 将 此 图 层 命名 为 
“背景 层 ”， 锁 定 此 层 。 

2) 新 建 一 个 图 层 ， 将 此 层 命 名 为 “文本 层 ”。 单 击 “ 文 本 ”工具 ， 设 置 文本 颜色 为 
深蓝 色 (#000033) ， 字 体 为 “Broadway”， 字 体 大 小 为 96 号 字 ， 字 体 间距 为 9.0， 输 入 文 
本 “MIRROR”， 按 下 Ctrl+B 组 合 键 ， 将 文本 块 打 散 分 离 。 分 别 选 中 每 一 个 字母 ， 按 下 
F8 键 ， 转 换 为 元 件 ， 类 型 均 为 图 形 元 件 。 再 一 次 分 别 选中 每 一 个 字符 ， 重 复 按 下 F8 键 ， 
转换 为 元 件 ， 这 次 类 型 均 为 影片 剪辑 ， 名 称 分 别 是 : M、 I、R、0O、R1、R2。 

3) 选择 “视图 ”菜单 一 “标尺 ”命令 ， 将 光标 指向 水 平 标 尺 处 ， 按 下 鼠标 左 键 拖 动 ， 
出 现 一 条 水 平 辅助 线 ， 辅 助 线 位 于 舞台 的 上 方 ， 此 水 乎 辅助 线 的 位 置 ， 是 字母 垂直 运动 到 
上 方 的 位 置 。 

4) 双击 字母 M， 进 入 影片 剪辑 的 编辑 状态 ， 在 第 20 帧 和 第 40 帧 处 插入 关键 帧 ， 分 
别 在 时 间 轴 上 第 1 帧 至 第 20 帧 、 第 21 帧 至 第 40 帧 的 任 一 帧 处 单 击 右键 , 在 弹出 的 快捷 菜 
单 中 选择 “创建 传统 补 间 ” 命 令 。 

5) 返回 场景 ， 双 击 字母 I， 进入 影片 剪辑 的 编辑 状态 。 在 第 4 帧 、 第 24 帧 、 第 44 帧 ， 
插入 关键 帧 ， 在 “属性 ”面板 中 设置 补 间 为 动画 。 单 击 第 24 帧 ， 修 改 第 24 帧 中 字母 ， 向 
上 移动 到 辅助 线 位 置 。 
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(6) 返回 场景 ， 双 击 字母 R， 进 入 影片 剪辑 的 编辑 状态 。 在 第 7 帧 、 第 27 帧 、 第 47 
帧 、 插 入 关键 帧 。 单 击 第 27 帧 ， 修 改 第 27 帧 中 字母 ， 移 动 到 辅助 线 位 置 。 其 他 字母 的 修 
改 以 此 类 推 ， 每 一 个 影片 剪辑 的 第 二 个 关键 帧 依次 推 后 3 帧 。 

7) 返回 到 场景 后 ， 单 击 文本 层 的 关键 帧 ， 将 这 几 个 字母 全 部 选中 。 选 择 “ 编 辑 ” 菜 单 
一 “直接 复制 ”命令 ， 选 择 “ 修 改 ” 菜 单一“ 变形 ”选项 一 “水 平 翻转 ”命令 ， 向 下 移动 
字母 的 位 置 ， 在 “属性 ”面板 中 设置 色彩 效果 ,色调 样式 为 灰 粉 色 (#CC9999),， 与 上 半 部 分 
背景 色 一 致 ， 按 下 CtrltEnter 组 合 键 ， 测 试 影片 效果 ， 字 母 呈 镜 像 依次 上 下 跳动 。 

3. 补 间 动 画 

补 间 动 画 是 在 传统 补 间 动 画 基 础 上 新 增加 的 动画 功能 ， 是 通过 为 不 同 帧 中 的 对 象 属性 
指定 不 同 的 值 而 创建 的 动画 。Flash 计算 这 两 个 帧 之 间 该 属性 的 值 。 

补 间 范 围 是 时 间 轴 中 的 一 组 帧 ， 其 中 的 某 个 对 象 具有 一 个 或 多 个 随时 间 变 化 的 属性 。 
补 间 范围 在 时 间 轴 中 显示 为 具有 蓝 色 背景 的 单个 图 层 中 的 一 组 帧 。 

属性 关键 帧 是 在 补 间 范 围 中 为 补 间 目 标 对 象 显 式 定义 一 个 或 多 个 属性 值 的 帧 。 这 些 属 
性 可 包括 位 置 、alpha( 透 明度 )、 色 调 等 。 定 义 的 每 个 属性 都 有 自己 的 属性 关键 帧 。 























安 注 意 : 
补 间 动 画 和 传统 补 间 之 间 的 差异: 传统 补 间 使 用 关键 帧 。 关 键 帧 是 其 中 显示 对 象 的 新 
实例 的 帧 。 补 间 动 画 只 能 具有 一 个 与 之 关联 的 对 象 实例 ,并 使 用 属性 关键 帧 而 不 是 关键 帧 。 


【 例 10.10】 ”弹跳 的 篮球 。 

制作 过 程 如 下 : 

1) 新 建 一 个 文档 ， 单 击 “ 椭 贺 ” 工 具 ， 设 置 笔触 颜色 为 无 ， 填 充 颜 色 为 径 向 渐变 ， 由 
红 至 深 红色 ， 绘 制 一 个 圆 形 。 单 击 “ 直 线 ” 工 具 ， 设 置 笔触 颜色 为 黑色 桶 红色 考 F6600， 
宽度 为 3 像素 ， 线 型 为 实 线 。 用 线条 工具 在 圆 形 正中 间 绘 制 一 条 竖 线 ， 然 后 选择 工具 栏 中 
的 填 色 色 板 回去 掉 填 色 ,， 用 椭圆 形 工具 在 相应 位 置 绘制 多 个 圆 形 线 框 。 单 击 “选择” 工具 ， 
将 线条 多 余 的 部 分 删除 。 最 后 选中 整个 图 形 ， 选 择 “ 修 改 ” 菜 单一 “转换 为 元 件 ” 命 令 ， 
将 其 转换 为 元 件 ， 按 图 10.43 所 示 绘 制 篮球 。 











= > 


图 10.43 ”绘制 篮球 


2) 在 时 间 轴 上 ， 在 第 10 帧 处 单 击 右键 ， 在 弹出 的 快捷 菜单 中 选择 “插入 帧 ”命令 ， 
在 第 1 帧 至 第 10 帧 处 任意 位 置 单 击 右键 , 在 弹出 的 快捷 菜单 中 选择 “创建 补 间 动 画 ” 命 令 。 

3) 单 击 第 10 帧 处 ， 然 后 移动 篮球 到 另 一 个 位 置 ， 在 画布 中 出 现 一 条 绿色 的 线段 ， 这 
条 线段 就 是 Flash CC 补 间 动 画 的 运动 路 径 ， 时 间 轴 第 10 帧 处 出 现 一 个 黑色 萎 形 标识 ， 此 
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标识 即 为 属性 关键 帧 。 
4) 在 第 40 帧 处 插入 帧 ， 分 别 单 击 第 20 帧 、 第 30 帧 、 第 40 帧 处 ， 移 动 篮球 至 不 同 的 
位 置 ， 形 成 一 条 蓝 色 折线 ， 此 折线 即 为 图 形 的 运动 路 径 。 
5) 用 “选择 ”工具 或 “部 分 选择 ”工具 对 折线 进行 曲线 调整 。 
6) 按 下 “ 回 车 键 ” 可 测试 图 形 的 运动 效果 ， 如 图 10.44 所 示 。 


























图 10.44 ”弹跳 的 繁 球 


4. 引导 动画 


运动 引导 层 允 许 用 户 绘制 一 条 曲线 作为 动画 路 径 ， 动 画 中 的 实例 、 组 合体 或 文本 块 将 
沿 着 这 条 曲线 运动 。 用 户 可 以 将 多 个 层 链接 到 一 个 运动 引导 层 ， 使 多 个 对 象 按照 相同 的 路 
径 运 动 。 链 接 到 运动 引导 层 的 普通 层 将 变 成 被 引导 层 。 

【 例 10.11】 沿路 径 移 动 的 动画 “飞舞 的 小 蜜蜂 ”。 

制作 过 程 如 下 : 

1) 新 建 一 个 文档 ， 选 择 “ 文 件 ” 菜 单一 “导入 到 舞台 ”命令 ， 导 入 矢量 花卉 作为 背景 
命名 此 层 为 “背景 层 ”， 锁 定 此 层 。 

2) 选择 “插入 ”菜单 一 “新 建 元 件 ” 命令， 弹出 “新 建 元 件 ” 对 话 框 ， 输 入 名 称 为 “小 
蜜蜂 ”， 类 型 为 影片 剪辑 ， 单 击 “ 确 定 ” 按 钮 ， 进 入 影片 剪辑 的 编辑 状态 。 

3) 设置 填充 为 无 ， 线 段 粗细 为 “3”， 颜 色 为 黑色 ， 用 “椭圆 形 ” 工 具 和 “直线 ” 工 
具 绘 制 小 蜜蜂 的 基本 外 形 。 单 击 “ 选 择 ” 工 具 调整 外 形 ， 删 除 多 余 的 线段 。 为 小 蜜蜂 填充 
颜色 ， 然 后 删除 内 部 多 余 的 边线 ， 如 图 10.45 中 的 步骤 1、2、3。 

4) 新 建 一 个 图 层 ， 绘 制 一 个 线段 粗细 为 “2”、 深 蓝 色 边线 的 蜜蜂 翅膀 ， 填 充 为 白色 ， 
击 颜色 面板 ， 选 择 填 充 颜 色 ，alpha 透明 度 为 50%。 选 中 翅膀 ， 按 下 F8 键 ， 将 此 图 形 转 
换 为 图 形 元 件 ， 再 按 一 次 F8 键 ， 转 换 元 件 ， 制 作 动态 效果 ， 类 型 为 影片 剪辑 ， 名 称 为 “ 翅 
膀 ”。 在 影片 剪辑 内 部 第 3 帧 、 第 5 帧 插入 关键 帧 ， 将 第 3 帧 向 下 缩 窄 变形， 然后 在 第 1 
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至 第 5 帧 之 间 添 加 传统 补 间 ， 完 成 翅膀 扇 动 动画 。 





图 10.45 小 蜜蜂 的 绘制 过 程 


5) 回 到 “小 蜜蜂 ”影片 剪辑 ， 复 制 翅膀 元 件 ， 调 整 层 的 顺序 ， 此 时 共有 三 层 : 小 蜜 峰 
身体 层 在 中 间 ， 上 下 各 加 一 层 翅膀 图 层 ， 完 成 单个 小 蜜蜂 原 地 飞 动 的 动画 。 

6) 新 建 一 个 图 层 ， 命 名 为 “小 蜜蜂 ”， 按 下 F11 键 ， 打 开 “ 库 ”面板 ， 将 “小 蜜蜂 ” 
影片 剪辑 元 件 拖 入 到 场景 中 ， 放 置 在 舞台 右 下 外 侧 。 

7) 单 击 “ 插 入 引导 层 ” 按 钮 ， 新 建 引导 层 ， 单 击 “ 钢 笔 ” 工具， 绘制 一 条 曲线 ， 曲 线 
路 径 经 过 画面 上 的 花 休 ， 将 引导 层 锁定 。 

8) 将 “小 蜜蜂 ” 层 置 于 引导 层 之 上 ， 然 后 将 “小 蜜蜂 ” 层 拖 到 引导 层 上 ，“ 小 蜜蜂 ” 
层 即 变 为 被 引导 层 ， 如 图 10.46 所 示 ， 建 立 引导 层 的 关系 。 单 击 第 1 帧 ， 将 小 蜜蜂 实例 拖 
动 至 引导 线 开 头 位 置 。 单 击 第 100 帧 ， 插 入 关键 帧 ， 将 小 蜜蜂 移动 到 引导 线 尾部 ， 在 “小 
蜜蜂 ” 层 上 设置 为 “创建 传统 补 间 ”。 





图 10.46 引导 层 的 关系 建立 


9) 在 “小 蜜蜂 ” 层 图 标 上 单 击 右键 ， 选 择 复制 图 层 ， 将 “小 蜜蜂 ”图 层 复 制 一 层 ， 命 
名 为 “小 蜜蜂 复制 ”。 在 第 28 帧 开始 建立 传统 补 间 ， 并 缩小 复制 层 中 的 小 蜜蜂 大 小 。 完 成 
一 条 引导 路 径 上 两 上 只 大 小 不 同 、 速 度 不 同 的 小 蜜蜂 飞舞 动画 。 

10) 保存 并 测试 影片 ， 完 成 传统 引导 线 动 画 制 作 ， 如 图 10.47 所 示 。 


5. 补 间 形 状 


使 用 补 间 形 状 可 以 创建 和 变形 类 似 的 效果 ， 以 某 个 形状 出 现 ， 随 着 时 间 推 移 ， 最 开始 
的 形状 逐渐 变形 成 另 一 个 形状 。 另 外 通过 添加 形状 提示 点 ， 控 制 补 间 形 状 渐变 的 结果 。 操 
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作 步 骤 如 下 : 选择 “修改 ”菜单 一 “形状 ”选项 一 “添加 形状 提示 点 ”命令 。 形 状 的 位 置 、 
大 小 、 颜 色 也 可 产生 渐变 效果 。 





图 10.47 飞舞 的 小 蜜蜂 的 制作 过 程 


【 例 10.12】 ”形状 渐变 ， 表 现 翻 书 效 果 ， 书 的 内 页 慢 慢 翻 过 来 。 

制作 过 程 如 下 : 

1) 新 建 一 个 文档 ， 单 击 “ 和 矩形 ”工具 ， 设 置 填充 颜色 为 深蓝 色 (#000033)。 绘 制 一 个 
形 ， 在 中 间 下 方 绘制 一 个 半圆 ， 重 命名 此 层 为 “封面 ”， 如 图 10.48(a) 所 示 。 
2) 新 建 一 个 图 层 ， 命 名 为 “书页 ”， 颜 色 设 置 为 深 灰 ， 绘 制 一 个 长 方形 ， 选 择 任意 变 
形 工具 ， 使 用 封套 命令 调整 为 弧 形 书页 ， 复 制 一 个 书页 ， 使 用 变形 面板 中 的 对 象 水 平 翻转 
命令 平行 翻转 书页 ， 完 成 左右 书页 的 制作 。 复 制 两 次 该 图 层 ， 依 次 缩 罕 书 页 ， 变 浅 颜 色 ， 
释放 起 来 完成 内 页 纸张 的 绘制 ， 如 图 10.48(b) 所 示 。 

3) 新 建 一 个 图 层 ， 选 择 “ 导 入 到 库 ” 命 令 ， 选 择 需 要 导入 的 “内 页 ”PSD 格式 位 图 ， 
此 时 进入 PSD 导入 格式 属性 选择 面板 ,在 图 层 转 换 区 选择 “单个 平面 化 位 图 ”选项 ， 在 文 
本 转换 区 选择 “平面 化 位 图 图 像 ” 选 项 ， 将 图 层 转换 为 Flash 图 层 ， 从 库 中 调 入 新 图 层 中 ， 
如 图 10.48(c) 所 示 。 置 于 书籍 图 像 之 上 ， 组 合成 完整 的 书 ， 如 图 10.48(d) 所 示 。 

4) 插入 新 的 一 个 图 层 ， 命 名 为 “ 翻 页 层 ”， 在 页 面 右边 绘制 一 个 矩形 ， 颜 色 为 白色 ， 
比 封 底 略 小 ， 单 击 “ 选 择 ” 工 具 ， 指 向 矩形 上 下 直线 边 ， 拖 动 变 成 曲线 ， 完 成 弧 形 的 内 页 
绘制 ， 利 用 此 层 的 补 间 形 状 制作 翻 书 效 果 。 

5) 书 在 翻动 的 过 程 中 会 发 生 形状 变化 。 单 击 第 13 帧 ， 插 入 关键 帧 ， 然 后 单 击 “ 任 意 
变形 ”工具 ， 缩 小 矩形 的 宽度 ， 倾 斜 拉 伸 内 页 右边 缘 至 上 书页 上 方 ， 完 成 书页 正 前 方 的 翻 
页 绘制 。 在 第 14 帧 插入 关键 帧 ， 打 开 “ 变 形 ” 窗 口 ， 选 择 “ 水 平 翻转 所 选 内 容 ” 国 命令 ， 
将 右边 书页 变化 为 左边 反 过 来 的 书页 。 在 第 25 帧 建立 空白 关键 帧 ,复制 第 一 帧 书页 ， 再 次 
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使 用 “水 平 翻转 ”命令 将 书页 转 成 左边 翻 开 的 书页 ， 参 见 图 10.49 所 示 的 翻 书 效 果 。 











图 10.48 书 的 制作 过 程 


6) 在 第 1 帧 到 第 13 帧 之 间 单 击 右键 创建 补 间 形 状 ， 测 试 变化 效果 。 如 果 可 以 正常 翻 
页 ， 则 完成 此 段 动画 。 如 果 翻 页 不 正常 ， 则 需 通过 择 “修改 ”菜单 一 “形状 ”选项 ~~“ 添 
加 形状 提示 点 ”命令 为 形状 添加 提示 点 。 操 作 方 法 是 在 第 1 帧 添加 4 个 提示 点 a、b、c、d， 
快捷 方式 为 Ctrl+ShifttH， 分 别 放 置 在 书页 的 四 个 角 ， 拖 动 时 红色 的 点 会 变 成 黄色 ， 在 第 
13 帧 将 4 个 点 依次 拖 动 到 相应 的 变化 点 上 ， 拖 动 时 红色 的 点 会 变 成 绿色 。 完 成 相对 性 提示 
点 的 设置 ， 测 试 完成 右边 单 边 翻 页 动画 。 从 第 14 帧 至 第 25 帧 ， 继 续 制作 左边 翻 页 动画 ， 
方法 与 右边 一 样 ， 图 10.49 展示 了 翻 书 效果 制作 过 程 。 





图 10.49 ” 翻 书 效果 制作 过 程 


7) 测试 Flash 效果 ， 书 页 流畅 地 翻 过 ， 达 到 翻 页 效果 ， 完 成 动画 制作 。 
6. 创建 遮 照 动画 


单 层 就 是 将 下 面 的 层 全 部 遮 住 ， 在 遮 日 层 中 添加 形状 ， 形 状 类 似 于 洞 ， 透 过 洞 看 到 
下 方 图 层 的 内 容 ， 链 接 到 遮 淖 层 的 普通 层 就 是 被 逛 置 层 。 利 用 “ 遮 淖 ”效果 ， 可 以 制作 许 
多 特效 ， 如 水 波 、 万 花 简 、 放 大 镜 、 望 远 镜 、 探 照 灯 等 。 

【 例 10.13】 创建 遮 照 动画 ， 动 画 效 果 为 地 球 不 停 地 旋转 ， 同 时 还 有 星空 光芒 四 射 。 

制作 过 程 如 下 : 

1) 新 建 一 个 文档 ， 背 景 为 白色 ， 新 建 一 个 元 件 ， 名 称 为 “地 图 ”， 类 型 为 图 形 。 选 择 
“文件 ”菜单 一 “导入 到 舞台 ”命令 ， 导 入 一 幅 位 图 地 球 jpg; 复制 、 粘 贴 该 位 图 ， 顶 端 对 
齐 ， 按 下 CtrHtB 组 合 键 ， 打 散 位 图 。 单 击 “ 套 索 ” 工 具 ， 单 击 选项 区 域 的 “魔术 棒 ” 功 能 
键 ， 单 击 位 图 中 的 黑色 区 域 ， 按 Del 键 删除 ， 去 除 黑色 背景 。 

2) 在 “属性 ”面板 中 ， 修 改 文档 背景 为 黑色 。 新 建 一 个 元 件 ， 名 称 为 “地 球 ”， 类 型 
为 影片 剪辑 ， 单 击 “确定 ”按钮 ， 进 入 元 件 编辑 状态 。 
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地 图 元 件 ， 导 入 位 图 ， 用 魔术 棒 去 除 背景 ， 复 制 一 遍 在 彩 效果 中 调 为 灰 绿 色 





“地 图 ” 层 中 ， 第 1 帧 位 图 在 标尺 位 置 第 40 帧 ,第 二 个 相同 地 图 在 标尺 位 置 





Ia 意 变形 工具 移动 控制 点 到 左下 


顶层 圆 形 十 
色 值 开始 为 


同 才 由 过 时 这 为 10 度 ， 
制 形 成 一 








设置 圆 形 为 遮 单 层 填 好 色 后 覆盖 于 地 图 上 ， ”光芒 的 第 二 层 设 置 补 间 逆 时 针 旋 转 
图 10.50 ”旋转 的 地 球 制作 过 程 


3) 下 面 利用 遮 音 层 制作 动画 。 将 第 一 层 命 名 为 “ 暗 地 图 ”， 打 开 “ 库 ”面板 ， 将 地 图 
元 件 拖 入 到 舞台 中 ， 选 中 地 图 实例 ， 单 击 “ 属 性 ”面板 中 “色彩 效果 ”中 的 “样式 ”下 拉 
菜单 ， 选 中 “高 级 ”， 设 置 相关 的 参数 : 红 为 21%， 绿 为 23%， 蓝 为 29%， 及 为 0，G 为 
81，B 为 92， 此 时 图 形 颜 色 为 暗 绿色 。 

4) 新 建 一 个 图 层 ， 命 名 为 “ 圆 1”， 单 刀 








“椭圆 ”工具 ， 按 下 Shift 键 ， 绘 制 一 个 100 
X100 像素 的 圆 形 。 打 开 “ 对 齐 ” 面 板 ， 单 击 “ 相 对 于 舞台 ”按钮 ， 使 图 形 与 舞台 居中 对 
。 选 中 “ 圆 1 ”图 层 ， 在 图 层 名 称 位 置 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 ， 选 择 “ 遮 
一 命令 ， 结 果 为 只 显示 圆 形 地 图 部 分 ， 其 他 部 分 已 被 遮 住 。 
5) 这 两 个 图 层 。 都 有 一 个 锁 标 志 ， 单 击 锁 标 志 ， 取 消 锁定 ， 单 击 “ 暗 地 图 ”图 层 的 第 
40 帧 ， 插 入 关键 帧 。 在 第 1 个 关键 帧 处 ， 地 图 在 圆 的 最 左 侧 。 在 第 40 帧 处 ， 将 地 图 移动 
到 圆 的 最 右 侧 。 右 击 第 1 帧 ， 在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 间 ”。 
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6) 新 建 一 个 图 层 ， 命 名 为 “地 图 ”， 将 地 图 元 件 拖 入 到 舞台 中 。 新 建 一 个 图 层 ， 命 名 
为 “ 圆 2”， 绘 制 RY 100X 100 像素 的 圆 ， 与 舞台 居中 对 齐 。 在 图 层 名 称 位 置 单 击 鼠 
标 右键 ， 选 择 “ 庶 日 层 ”， 同 理 选中 地 图 层 。 单 击 图 层 位 置 的 锁 标 志 ， 取 消 锁定 ， 单 击 第 
40 帧 ， 插 入 一 个 关键 帧 ， 第 1 帧 地 图 在 圆 的 最 右 侧 ， 第 40 帧 地 图 在 圆 的 最 左 侧 。 右 击 第 
1 帧 ， 在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 间 ”。 

7) 插入 一 个 图 层 ， 绘 制 一 个 同 地 球 尺 寸 的 正 圆 ， 与 舞台 居中 对 齐 ， 填 充 为 径 向 渐变 ; 
#006666(alpha:0) 至 #006666(alpha:60)。 此 时 旋转 的 地 球 制作 完成 ， 如 图 10.50 所 示 。 

8) 下 面 制作 星空 四 射 。 返 回 场景 ， 绘 制 一 个 水 平 矩 形 条 ， 尺 寸 100X3 像素 ， 填 充 为 
线性 渐变 : 红 (上 F0000) 一 橘 黄 (性 FCC00) 一 黄 (性 FFF00)。 选 中 图 形 ， 按 下 F8 键 ， 转 换 为 
元 件 ， 元 件 名 称 为 “光芒 ” 为 图 形 ， 双 击 进入 光芒 元 件 编辑 状态 。 选 中 图 形 ， 位 置 
x、y 为 100、0, 单 击 “ 任 工具 ， 将 变形 点 移动 到 舞台 中 间 lcm 处 ， 然 后 打开 “ 变 
形 ” 面 板 ， 输 入 10 度 ， 连 续 单 击 “ 重 制 选区 和 变形 ”按钮 。 形 成 光芒 的 形状 ,选中 所 有 的 
图 形 ， 进 行 组 合 操作 。 

， oe 新 建 一 个 元 件 ， 名 称 为 “光芒 四 射 ”， 关 0 剪辑 。 打 开 “ 库 ”对 
板 ， 将 光芒 元 件 拖 入 到 第 1 层 ， 与 舞台 居中 对 齐 。 新 建 一 层 ， 将 光芒 元 件 ety 也 
层 ， 居中 ， 选 择 “ 修 改 ” 菜 单一 “变形 ”选项 一 “水 平 翻转 ”命令 。 单 击 第 20 帧 ， 
插入 关键 帧 ， 右 击 第 1 帧 ， 在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 间 ”。 在 “属性 ”再 
板 中 设置 旋转 : 逆 时 针 ，1 次 。 右 击 第 2 层 ， 在 弹出 的 快捷 菜单 中 ， 选 择 “ 遮 单 层 ”命令 ， 
星空 四 射 效果 完成 。 

10) 返回 场景 ， 在 第 1 层 ， 打 开 “ 库 ”面板 ， 将 “地 球 ” 影 片 剪 辑 元 件 拖 入 到 场景 中 ， 
与 舞台 居中 对 齐 。 缩 放 到 合适 大 小 ， 新 建 第 2 层 ， 将 “星空 四 射 ”影片 剪辑 拖 入 到 场景 中 ， 
与 舞台 居中 对 齐 ， 测 试 动画 ， 操 作 完 成 ， 效 果 如 图 10.51 所 示 。 


河 















图 10.51 旋转 的 地 球 
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7. 按钮 的 制作 


按钮 可 以 显示 为 图 像 或 动画 ， 分 别 响应 不 同 的 鼠标 状态 ， 当 用 户 使 用 鼠标 产生 单 击 、 
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按 下 或 悬 停 在 按钮 之 上 等 动作 时 ， 按 钮 都 会 有 不 同 的 显示 效果 。 要 使 按钮 在 电影 中 产生 交 
互 ， 可 将 按钮 符号 的 实例 放置 在 舞台 上 ， 然 后 给 实例 分 配 相 应 的 动作 。 


【 例 10.14】 


按钮 的 制作 : 网 页 中 的 立体 按钮 。 效果 : 当 鼠 标 经 过 按钮 时 ， 按 钮 跳动 ， 


链接 的 文字 变色 ， 单 击 进入 链接 页 面 ， 如 图 10.52 所 示 。 






按钮 按 下 时 属性 滤 镜 设置 


制作 过 程 如 下 : 
1) 网 页 界面 设计 。 新 建 一 个 文档 ， 尺 寸 为 1006X 635 像素 。 新 建 一 层 ， 选 择 “ 文 件 ” 
菜单 一 “导入 到 舞台 ”命令 ,选择 导入 位 图 素材 “10.52 网 页 界面 设计 jpg”。 设 置 位 图 属性 









fion tl.ClckTocoroedPage (event sloores: 


) iestotomL (nev WLlegsest Cindent htal’), "blank : 


插入 ActionScript 3.0 链接 Web 页 面 动作 代码 链接 到 indexl html 页 面 
图 10.52 ”立体 按钮 的 制作 过 程 


中 的 位 置 为 x:0，y:0， 完 成 界面 基本 设计 。 


2) 选择 “插入 ”菜单 一 “新 建 元 件 ” 按 钮 ， 名 称 为 “ 圆 角 矩形 ”， 类 型 为 影片 剪辑 ， 
进入 元 件 编辑 状态 。 单 击 “ 基 本 和 矩形” 工具， 在 “颜色 ”面板 中 设置 填充 为 径 向 渐变 : 白 一 





黑 。 绘 制 一 个 区 





3) 将 元 件 





拖 动 至 舞 








角 长 方形 。 


E 台 , 放置 在 相应 的 位 置 , 单 击 右键 选择 “转换 为 元 件 ” 命令 , 将 “ 国 





角 矩 形 ”影片 剪辑 转换 为 按钮 元 件 ， 命 名 为 “按钮 ”。 
4) 双击 进入 按钮 元 件 内 ， 在 圆 角 矩形 层 的 “指针 经 过 ” 帧 上 按 F6 键 建立 关键 帧 ， 单 
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击 圆 角 矩形 的 同时 打开 “属性 ”面板 ， 按 下 滤 镜 选项 的 “+” 键 打开 滤 镜 属性 菜单 ， 为 圆 
角 和 拖 形 添加 投影 及 红色 发 光 特 效 。 

5) 在 “ 按 下 ” 帧 上 同样 建立 关键 帧 ， 将 按钮 滤 镜 中 的 投影 选项 设置 为 内 阴影 ， 关 掉 红 
色 外 发 光 属 性 。 

6) 在 按钮 元 件 内 新 建 图 层 ， 命 名 为 “文字 ”， 使 用 工具 中 的 文字 键入 “进入 主页 ” 
内 容 ， 字 体 设 置 为 “微软 雅 黑 ”， 大 小 “22 磅 ”， 颜 色 为 深 红色 “#660000”。 在 指针 经 
过 帧 建立 关键 帧 ， 字 体 颜 色 变换 为 蓝 色 “#0000FF”。 在 “ 按 下 ” 帧 也 建立 关键 帧 ， 颜 色 
变换 为 淡 黄 色 “#FFFF99”。 

7) 返回 场景 ， 单 击 按钮 元 件 ， 在 “属性 ”面板 中 将 按钮 元 件 命名 为 “a”。 

8) 单 击 “ 窗 口 ” 菜 单一 “代码 片段 ”按钮 , 打开 代码 片段 面板 , 然后 单 击 “ActionScript” 
一 “动作 ”一 “ 单 击 以 转 到 Web 页 ”按钮 。 进入 “动作 ”面板 , 将 URL 地 址 改 成 index1.html， 
完成 跳 转 网 页 代码 的 添加 。 

9) 测试 影片 ， 完 成 整体 动画 的 制作 ， 参 见 图 10.53。 























占 越 科技 


AP 


TEL 


图 10.53 ”立体 按钮 完成 图 


8. 为 动画 添加 声音 

在 Flash 中 有 两 种 类 型 的 声音 : 事件 声音 和 音频 流 。 事 件 声音 必须 完全 下 载 后 才能 开 
始 播放 ， 除 非 明 确 停止 ， 否 则 将 一 直 连 续 播放 。 音 频 流 在 前 几 帧 下 载 了 足够 的 数据 后 就 开 
台 播 放 ， 音频 流 可 以 通过 和 时 间 轴 同步 以 便 在 Web 站 点 上 播放 。 
事件 声音 一 般 用 于 按钮 或 是 固定 动作 中 的 声音 ， 而 音频 流 一 般 应 用 于 背景 音乐 MTV 
的 制作 。 

导入 声音 文件 的 格式 一 般 有 : WAV( 仅 限 Windows)、Mid、AIFF( 仅 限 Macintosh)、 
MP3(Windows 或 Macintosb) 等 , 如 图 10.54 所 示 。 还 可 设置 声音 的 效果 属性 以 创造 更 优美 


9 音效 。 
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图 10.54 ”音频 格式 


【 例 10.15】 ”给 按钮 添加 声音 效果 : 当 鼠 标 经 过 按钮 时 会 发 出 清脆 的 声响 。 

制作 过 程 如 下 : 在 上 一 个 实例 的 基础 上 ， 开 始 给 按钮 添加 声音 。 首 先 打开 例 10.14 的 
Flash 文件 。 

1) 导入 声音 。 选择 “文件 ”菜单 一 “导入 ”一 “导入 到 库 ” 命 令 , 选择 文件 notify.wav， 
单 击 “ 打 开 ” 按 钮 ， 打 开 “ 库 ”面板 ， 查 看 导入 的 音频 文件 ， 如 图 10.55 所 示 。 








加 ID 
EE el 
Fi) 


文件 各 (Ni notify [wav 天 sa Cuwav) ” 
喜 





图 10.55 导入 声音 文件 


2) 双击 “ 库 ” 面板 中 的 按钮 元 件 ， 进 入 按钮 编辑 状态 ， 新 插入 一 层 ， 命 名 为 “声效 ” 
选择 此 图 层 的 第 2 帧 , 即 指针 经 过 处 , 插入 一 个 空白 关键 帧 , 然后 打开 “ 库 ” 面 板 , 将 “ 库 ” 
面板 中 的 声音 文件 notify.wav 拖 放 到 舞台 中 ， 会 发 现 “ 音 效 ” 层 从 第 2 帧 开始 出 现 了 声音 
的 波形 线 ， 如 图 10.56 所 示 。 








图 10.56 给 按钮 插入 事件 声音 
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3) 在 “属性 ”面板 中 ， 将 “同步 ”选项 设置 为 “事件 ”， 测 试 一 下 动画 。 当 鼠标 移 到 
按钮 上 时 ， 声 效 就 出 现 了 。 


9. 有 关 声 音 属性 的 设置 


在 “属性 ”面板 中 ， 单 击 “ 名 称 ” 下 拉 列 表 ， 从 中 选择 声音 文件 。 
从 “效果 ”下 拉 列 表 中 选择 效果 选项 : 
1) 无 : 不 对 声音 文件 应 用 效果 。 选 择 此 选项 将 删除 以 前 应 用 的 效果 。 
2) 左 声 道 / 右 声 道 : 只 在 左 声 道 或 右 声 道中 播放 声音 。 
3) 从 左 到 右 淡 出 /从 右 到 左 淡出 : 将 声音 从 一 个 声 道 切换 到 另 一 个 声 道 。 
4) 淡 入 : 在 声音 的 持续 时 间 内 逐渐 增加 音量 。 
5) 淡出 : 在 声音 的 持续 时 间 内 逐渐 减 小 音量 。 
6) 自 定义 :允许 使 用 “编辑 封套 ”创建 自 定义 的 声音 淡 入 和 淡出 点 。 
从 “同步 ”下 拉 列 表 中 选择 同步 选项 : 
1) 事件 : 将 声音 和 事件 的 发 生 过 程 同步 起 来 .事件 声音 在 显示 起 始 关键 帧 时 开始 播放 ， 
并 独立 于 时 间 轴 完整 播放 ， 即 使 SWF 文件 停止 播放 ， 它 也 会 继续 。 当 播放 发 布 SWF 文 
件 时 ， 事 件 声音 混合 在 一 起 。 
2) 开始 : 与 事件 选项 的 功能 相近 ， 但 是 如 果 声音 已 经 在 播放 ， 则 新 的 声音 实例 不 会 
播放 。 
3) 停止 : 使 指定 的 声音 静音 。 
4) 数据 流 : 同步 声音 ， 以 便 在 Web 站 点 上 播放 。Flash 强制 动画 和 音频 流 同 步 。 与 事 
件 声音 不 同 ， 音 频 流 的 播放 时 间 绝对 不 会 比 帧 的 播放 时 间 长 。 当 发 布 SWF 文件 时 ， 音 频 
5) 重复 : 为 “重复 ”输入 一 个 值 ， 以 指定 声音 应 循环 的 次 数 ， 或 者 选择 “循环 ”以 连 
续 重复 声音 。 对 于 音频 流 不 建议 循环 播放 。 
6) 利用 “声音 编辑 控件 ”编辑 声音 : 在 Flash 中 可 以 对 声音 进行 一 些 简单 的 编辑 ， 比 
如 控制 声音 的 播放 音量 、 改 变声 音 开始 播放 和 停止 播放 的 位 置 等 。 
单 击 “ 属 性 ”面板 中 “效果 ” 右 侧 的 “编辑 声音 封套 ”按钮 图 ， 弹 出 “编辑 封套 ” 
对 话 框 ， 如 图 10.57 所 示 ， 在 此 对 话 框 中 编辑 声音 。 
e 要 改变 声音 的 起 始点 和 终止 点 ， 拖 动 “ 编 辑 封 套 ” 中 的 “开始 时 间 ” 和 “停止 时 
间 ” 控 件 。 
e 要 更 改 声音 封 套 ， 拖 动 封套 手柄 来 改变 声音 中 不 同 点 的 级 别 。 封 套 线 显 示 声 音 播 
放 时 的 音量 。 单 击 封套 线 可 以 创建 其 他 封套 手柄 (总 共 可 达 8 个 )。 要 删除 封套 手 
柄 ， 请 将 其 拖 出 窗口 。 
。 单 击 “ 放 大 ”或 “缩小 ”按钮 ， 可 以 改变 窗口 中 声音 的 显示 大 小 。 
e 要 在 秒 和 帧 之 间 切 换 时 间 单 位 ， 单 击 “ 秒 ”或 “ 帧 ”按钮 。 
。 单 击 “ 播 放 ” 按 钮 ， 可 以 听 到 编辑 后 的 声音 。 
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图 10.57 设置 声音 属性 与 编辑 “封套 ”对 话 框 
7) 输出 带 声音 的 动画 : 如 果 Flash 文件 中 包含 有 声音 ， 就 要 考虑 采用 什么 样 的 格式 对 
声音 进行 压缩 。 
在 “ 库 ” 面 板 中 单 击 声音 文件 , 然后 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “属性 ”， 
单 击 压 缩 下 拉 列 表 ， 有 以 下 几 种 压缩 格式 ， 如 图 10.58 所 示 。 
e ADPCM: 用 于 设置 8 位 或 16 位 声音 数据 的 压缩 。 导 出 较 短 的 事件 声音 (如 单 击 
按钮 ) 时 ， 请 使 用 ADPCM 选项 。 
e MP3: 可 以 用 MP3 压缩 格式 导出 声音 。 当 导出 乐曲 这 样 较 长 的 音频 流 时 ， 请 使 
用 “MP3” 选 项 。 
e 原始 : 在 导出 声音 时 不 进行 压缩 。 
e 语音 : 使 用 一 种 适合 于 语音 的 压缩 方式 导出 声音 。 





图 10.58 声音 压缩 格式 


第 10 章 ”利用 Flash CC 设计 网 页 动画 。193。 


给 页 面 添加 背景 音乐 ， 制 作 过 程 如 下 : 

1) 打开 例 10.11 的 Flash 文件 ， 选 择 “ 文 件 ”菜单 一 “导入 ”一 “导入 到 库 ” 命 令 ， 
选择 “月 亮 代表 我 的 心 一 陶 芋 .mp3” 声 音 文件 ， 单 击 “ 打 开 ” 按 钮 。 

2) 在 场景 中 插入 一 层 ， 选 中 此 层 的 空白 关键 帧 (第 1 帧 )， 将 库 面板 中 的 “月 亮 代表 我 
的 心 一 陶 博 .mp3” 拖 到 场景 中 。 

3) 在 “属性 ”面板 中 设置 同步 选项 为 “事件 ”。 最 后 按 下 Ctrl+Enter 组 合 键 ， 测 试 影 
片 ， 音 乐 响 起 ， 制 作 完成 。 


安 注 意 : 
将 较 长 的 声音 插入 较 短 的 动画 中 会 出 现 声音 未 播 完 动画 重复 播放 的 不 同步 现象 ， 这 需 
要 通过 代码 控制 停止 声音 或 在 专业 音频 软件 中 对 声音 文件 进行 截取 。 


10. 导入 视频 


在 Flash CC 中 , 可 以 导入 多 种 格式 的 视频 文件 。 如 果 用 户 的 系统 中 安装 了 QuickTime 7、 
DirectX 9 或 更 高 版 本 ， 便 可 以 导入 MOV 格式 的 视频 前 辑 。 在 安装 了 QuickTime 7 后 ， 导 
入 的 视频 支持 .avi、 .dv、mpg、.mpeg、.mov 格式 的 文件 。 如果 安 装 了 DirectX 9 以 上 版 本 ( 限 
Windows 系统 下 )， 那 么 导入 的 视频 支持 .avi、.mpg、.mpeg、.wmv、.asf 格式 的 文件 。 如 果 
导入 的 视频 或 音频 格式 不 支持 ， 则 会 弹出 警告 信息 。 另 外 ， 如 果 导 入 的 视频 不 支持 ， 可 以 
通过 其 他 软件 进行 格式 修改 后 ， 再 进行 导入 。 
Flash CC 中 的 视频 导入 根据 大 小 及 网 络 情况 ， 0 -种 是 通过 播 
放 组 件 或 Action 编程 运行 的 渐进 式 下 载 视频 模式 ， 另 一 种 是 在 swf 文件 中 加 载 并 播放 的 其 
入 式 视频 模式 。 
e 渐进 式 下 载 视频 模式 中 的 视频 独立 于 其 他 Flash 内 容 ， 不 限制 视频 的 大 小 和 时 间 ， 
更 新 比较 容易 ， 但 视频 内 容 无 法 在 Flash 文件 中 直接 观看 和 编辑 。 

e 嵌入 式 视频 模式 的 视频 文件 数据 都 将 被 添加 到 Flash 文件 中 , 可 以 在 时 间 轴 上 进行 
编辑 ， 可 以 随时 查看 和 显示 独立 视频 帧 ， 但 对 视频 格式 和 大 小 要 求 比较 严格 。 一 
般 少 于 10 秒 的 视频 显示 效果 较 好 ， 因 为 视频 文件 会 使 Flash 文件 变 得 很 大 。 

【 例 10.16】 在 Flash 中 导入 渐进 式 视频 ， 如 图 10.60 所 示 。 

制作 过 程 如 下 : 

1) 新 建文 件 ， 执行“ 文件 ”菜单 一 “导入 ”一 “导入 到 舞台 ”命令 ,将 素材 “ 例 11-16 
素材 图 -笔记 本 电脑 ”文件 导入 ， 修 改 图 片 素材 大 小 与 舞台 大 小 一 至 

2) 新 建 图 层 ， 执 行 “ 文 件 ” 菜 单一 “导入 ”一 “导入 视频 ”命令 ,选择 “ 使 用 播放 组 
件 加 载 外 部 视频 ”选项 ， 在 文件 路 径 浏 览 中 打开 素材 视频 文件 “10.16 渐进 式 视频 .flv” 文 
件 。 单 击 “ 下 一 步 ”， 进 入 播放 组 件 的 “ 设 定 外 观 ” 面 板 ， 选 择 合 适 的 播放 外 观 面板 ， 单 
击 “ 下 一 步 ” 完 成 视频 的 导入 ， 如 图 10.59(a) 至 (d) 所 示 。 

3) 将 视频 放置 在 屏幕 中 间 ， 调整 到 合适 的 大 小 ， 新建 一 个 图 层 , 绘制 黑色 和 矩形 迹 挡 视 
频 LOGO， 单 击 文字 工具 ， 键 入 自己 设计 的 宣传 内 容 ， 置 于 黑色 算 形 之 上 ， 测 试 完成 渐进 
式 视 频 动画 的 制作 ， 如 图 10.60 所 示 。 
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图 10.59 导入 渐进 式 视频 的 过 程 














图 10.60 完成 渐进 式 视频 的 制作 


【 例 10.17】 在 Flash 中 导入 嵌入 式 视频 ， 如 图 10.61 所 示 。 

制作 过 程 如 下 : 

1) 新 建 图 层 ， 执 行 “文件 ”菜单 一 “导入 ”一 “导入 视频 ”命令 ， 进 入 “选择 视频 ” 
面板 。 选 择 “在 SWF 中 嵌入 FLV 并 在 时 间 轴 中 播放 ”选项 ， 在 文件 路 径 浏览 中 打开 素材 
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视频 文件 “10.17 嵌入 式 视频 flv”。 单 击 “ 下 一 步 ”， 进 入 “嵌入 ”面板 ， 选 择 “符号 类 

型 ” 为 “嵌入 的 视频 ”， 色 选 其 他 选项 ， 单 击 “ 下 一 步 ” 完 成 视频 的 导入 ， 将 视频 置 于 “图 

层 1” 位置 ， 图 层 名 称 为 “视频 ” 层 。 
2) 将 视频 放置 在 屏幕 中 间 ， 调 整 到 合适 的 大 小 ,新 建 一 个 图 层 , 绘制 一 个 与 视频 大 小 

相近 的 蓝 色 椭 圆 迹 挡 住 视频 ， 并 设置 该 图 层 为 “视频 ”图 层 的 谈 罩 层 。 

3) 剪 切 椭圆 的 边框 ， 复制 到 新 的 图 层 。 单 击 “ 工 具 ” 中 的 “宽度 ”工具 对 边框 进行 变 

形 设计 ， 加 粗 右上 角 绘制 成 粗细 变化 的 笔触 效果 的 边框 。 然 后 在 左上 角 使 用 “直线 ”工具 

绘制 两 条 竖 线 ， 同 样 使 用 “宽度 ”工具 加 粗 外 形 ， 完 成 装饰 耳 革 的 制作 。 

4) 修改 边框 颜色 , 将 边框 转换 成 影片 剪辑 元 件 , 在 “属性 ”的 “ 滤 镜 ” 面板 中 选择 “ 斜 

角 ” 特 效 ， 采 用 默认 数值 ， 完 成 立体 边框 的 制作 。 







































































5) 在 右 下 角 绘制 绿色 圆 形 ， 设 置 为 影片 剪辑 ， 和 边框 一 样 采 用 滤 镜 斜 角 特 效 ， 在 圆 形 
-使 用 文字 工具 键入 自己 设计 的 宣传 内 容 ， 完 成 视频 装饰 的 设计 。 
6) 测试 完成 动画 ， 如 图 10.61 所 示 。 








使 用 “在 SWF 中 嵌入 FLV 并 在 时 间 轴 中 播放 ”选项 选择 “嵌入 的 视频 选项 ” 单 击 “ 下 一 步 ” 





绘制 椭圆 ， 在 这 日 与 视频 图 使 用 宽度 工具 变形 
层 之 上 新 建 图 层 描 边 








绘制 装饰 图 形 ， 转 换 为 硬盘 剪辑 ， 在 “属性 ” 
中 添加 斜 角 滤 镜 特效 ， 立 体 化 边框 





图 10.61 翌 入 式 视频 的 制作 


10.4.5 “Flash 动画 中 的 交互 控制 
ActionScript 是 Flash 的 脚本 程序 语言 ， 在 Flash 软件 的 更 新 换代 中 共 经 历 了 三 个 脚本 
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语言 版 本 ， 分 别 是 ActionScript 1.0、ActionScript 2.0 和 ActionScript 3.0。 而 在 Flash CC 中 


已 经 不 再 支持 1.0 和 2.0 的 版 本 ， 只 支持 ActionScript 3.0。 








ActionScript 脚本 语言 被 广泛 应 用 于 实现 程序 化 的 交互 动画 ， 如 网 站 广告 、 网 络 游戏 、 











Flash MTV 等 ， 极 大 丰富 了 Flash 的 交互 表现 功能 。 


对 于 初学 者 来 说 ，Flash 提供 了 简单 、 便 捷 的 开发 环境 和 方法 ， 比 如 “代码 片段 ”、 
“组 件 ” 等 ， 配 合 使 用 将 大 大 降低 程序 语言 的 编写 难度 ， 提 高 制作 效率 。 


1. 动作 面板 介绍 


用 ActionScript 进行 编程 需要 用 到 “动作 ”面板 ，“ 动 作 ” 面 板 是 专业 编写 脚本 程序 
的 开发 环境 。 选 择 “ 窗 口 ” 菜 单一 “动作 ”命令 ， 或 单 击 快捷 键 FB， 打 开 “ 动 作 ” 面 板 。 
“动作 ”面板 由 三 部 分 组 成 : 动作 工具 栏 、 脚 本 导航 器 和 脚本 窗 格 ， 如 图 10.62 所 示 。 


脚本 关键 帧 位 置 





脚本 导航 器 


图 10.62 “动作 ”面板 


2. 动作 脚本 基本 语法 
1) 点 操作 符 





动作 工具 栏 


在 ActionScript 3.0 中 ， 点 “.” 可 以 用 来 表示 与 某 个 对 象 的 相关 属性 、 方 法 、 变 量 或 目 


标 。 例 如 : 
a_me.stop0); 
说 明 : 停止 舞台 中 实例 名 称 为 “a_mc” 的 影片 剪辑 。 
2) 圆 括号 


在 定义 函数 的 时 候 ， 任 何 参数 定义 都 必须 在 一 对 圆 括号 内 ， 例 如 : 





gotoAndPlay(5); 
说 明 : 跳 转 并 播放 第 5 帧 。 


3) 花 括号 
动作 脚本 有 时 需要 将 几 行 代码 组 合 到 块 中 。 这 就 需要 使 朋 








日 花 括号 “{} ”。ActionScript 
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3.0 中 ， 一 组 语句 可 以 被 一 对 花 括 号 括 起 来 组 成 一 个 语句 块 ， 例 如 : 


a_mc.addEventListener(MouseEventCLICK, fl ClickToGoToNextFrame): 
function fl ClickToGoToNextFrame(event:MouseEvenb):void 





{ 
nextFrame(); 
说 明 : 单 击 指定 的 实例 名 称 为 “a_mc” 的 影片 剪辑 元 件 会 将 播放 头 移 到 下 一 帧 并 停止 
此 影片 。 
4) 分 号 


ActionScript 3.0 中 ， 分 号 主要 用 来 表示 语句 结束 ， 例 如 : 


a_ me.x += 100; 
a_mc.y += 100; 


说 明 : 实例 名 称 为 “a_mc” 的 影片 剪辑 元 件 向 右 移动 100 像素 、 向 下 移动 100 像素 。 


5) 注释 
为 方便 阅读 和 修改 ， 可 以 在 “动作 ”面板 中 使 用 “/” 符 号 进行 单行 简单 注释 ， 也 可 


以 在 “/#” 和 “对 ”符号 之 间 添 加 内 容 表示 注释 ， 注 释 内 容 不 会 被 程序 执行 ， 起 到 加 注 和 
说 明 的 作用 ， 从 而 提高 工作 效率 ， 帮 助 合作 开发 者 理解 编写 的 内 容 。 例 如 : 


常用 





旋 在 此 帧 处 停止 

Flash 时 间 轴 将 在 插入 此 代码 的 帧 处 停止 /暂停 。 

也 可 用 于 停止/ 暂停 影片 剪辑 的 时 间 轴 。 

人 

stopO; 

说 明 : 在 脚本 窗口 中 ， 注 释 符 里 的 内 容 是 对 下 方 语言 程序 的 解释 ， 不 会 执行 。 
其 他 语言 知识 请 参考 专门 的 语言 类 书籍 ， 本 教材 不 再 详细 说 明 。 

3. 使 用 “代码 片段 ”面板 


使 用 “代码 片段 ”面板 可 以 轻松 将 ActionScript 3.0 代码 添加 到 FLA 文件 中 ， 以 完成 
功能 的 设置 。 对 于 初学 者 来 说 ， 这 是 非常 实用 的 功能 。 

1) 了 解 “ 代 码 片 段 ”面板 

打开 “窗口 ”一 “代码 片段 ”面板 ，Flash CC 在 该 面板 中 预 置 了 多 种 类 型 的 脚本 代码 。 


有 ActionScript 文档 、HTML5 Canvas 文档 、WebGL 文档 三 个 大 类 用 于 交互 ， 本 教材 主要 
介绍 ActionScript 代码 部 分 ， 如 图 10.63 所 示 。 


代码 片段 列表 主要 有 “动作 ”、“ 时 间 轴 导航 ”、“ 动 画 ”、“ 加 载 和 御 载 ”、“ 音 











频 和 视频 ”、“ 事 件 处 理 函 数 ”、“ 移 动 触 控 事件 ”等 常用 代码 内 容 。 单 击 分 类 前 的 三 角 
形 按钮 ， 可 以 展开 分 类 细则 ， 选 择 需要 添加 的 代码 片段 ， 双 击 鼠 标 左 键 就 可 以 将 相应 的 脚 
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本 加 入 当前 所 选 的 关键 帧 。 





PHTMLS Canvas 
> WebGL 


Ec= se 
图 10.63 “代码 片段 ”面板 








为 实例 添加 动作 

【 例 10.18】 设计 自 定义 鼠标 特效 。 

制作 过 程 如 下 : 

1) 首先 打开 实例 文件 10-18.fla。 设置 背景 色 为 黑色 , 打开 “ 库 ” 面板, 在 库 中 选择 “上 
升 的 一 堆 泡 泡 动画 ”影片 剪辑 元 件 , 拖 放 到 舞台 中 央 。 在 场景 中 , 选中 影片 剪辑 , 打开 “ 属 
性 ”面板 ， 将 影片 剪辑 元 件 的 实例 命名 为 “a01”。 

2) 选中 影片 剪辑 “a01”， 打 开 “ 代 码 片段 ”面板 ”一 “ActionScript” 一 “动作 ”一 
“ 自 定 义 鼠 标 光 标 ”。 

3) 双击 该 代码 ， 在 “动作 ”面板 中 默认 加 载 自 定 义 鼠 标 光 标 代 码 ， 如 图 10.64 所 示 。 


“| v 巴 acionscripe 
所 动作 


口音 去 以 持 到 Web 下 


stage, addChild(a01) ; 有 
a01.mouseEnabled = false 口 让 定义 刀 标 光标 
301. ad 虐 ventListener 全 went,ENTER_FRAIE。 £1_CustonllouseCursor) : 
TREE Ba) 


a01.x = stage.mouseX: 
a01.y = stage. nouseY: 


YMouse. hide () : 








图 10.64 ” 自 定义 鼠标 特效 
代码 如 下 : 


stage.addChild(a01) ; 
a01.mouseEnabled = false: 
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a01.addEventListener(EventENTER_FRAME, fl CustomMouseCursor); 
function fl CustomMouseCursor(event:Event) 

{a0l.x= stage.mouseX:a01.y = stage.mouseY:} 

Mouse.hide(); 


4) 测试 影片 ， 完 成 自 定义 鼠标 特效 。 


代码 中 的 “a01” 是 可 替换 部 分 ， 根 据 自 己 命名 的 影片 剪辑 元 件 实例 可 以 进行 替换 。 


【 例 10.19】 设计 单 击 切换 画册 效果 ， 如 图 10.68 所 示 。 

制作 过 程 如 下 : 

1) 在 Flash 中 新 建 i 找到 素材 的 “图 片 1” 至 “图 片 6” 文 件 ， 将 新 建文 件 
的 图 层 1 命名 为 “图 片 层 ”并 按 顺 序 建 立 6 个 连续 的 关键 帧 ， 在 每 个 关键 帧 导入 1 张 “ 图 
片 ” 文 件 ， 并 缩放 到 合适 大 小 。 

2) ee 命名 为 “ 遮 单 层 ”， 在 第 6 帧 插入 帧 。 绘 制 圆 角 矩 形 ， 并 将 遮 音 应 用 于 
“图 片 ” 层 ， 使 图 片 完全 显示 在 圆 角 矩形 内 ， 测 试 影片 ， 动 画 中 显示 不 断 轮换 播放 的 图 片 ， 
完成 统 0 寸 的 制作 。 

3) 新 建 图 层 ， 命 名 为 “按钮 层 ”， 在 第 6 帧 插入 帧 。 参 考 例 10.14， 利 用 绘图 工具 和 
渐变 色 填 充 绘制 并 完成 一 个 按钮 元 件 , 也 可 以 打开 “ 例 10-19.fla”, 直接 复制 “ 例 10-19.fla” 
中 的 按钮 到 新 文件 中 ， 复 制 一 个 按钮 ， 旋 转 到 合适 的 方向 ， 使 两 个 按钮 元 件 放 置 在 图 册 两 
边 用 来 承担 前 后 翻 页 的 控制 点 。 打 开 “ 属 性 ”面板 ， 将 左边 的 按钮 实例 命名 为 “a01”， 将 
右边 的 按钮 实例 命名 为 “a02”， 完 成 后 如 图 10.65 所 示 。 





图 10.65 ”制作 画册 文件 


4) 单 击 任意 图 层 的 第 一 帧 ， 打 开 “ 代 码 片段 ”面板 一 “时 间 轴 导航 ”一 “在 此 帧 处 停 
止 ”， 双 击 代码 ， 就 会 自动 生成 新 的 命名 为 “Actions” 的 图 层 ， 并 在 第 一 帧 建立 停止 播放 
代码 。 此 时 测试 影片 ， 会 发 现 影片 停 在 第 一 帧 处 不 动 ， 如 图 10.66 所 示 。 
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v ActionScript 
P 固 动 作 








图 10.66 设置 “停止 ”代码 


5) 单 击 舞台 上 的 按钮 元 件 “a02”， 打 开 “ 代 码 片段 ”面板 一 “时 间 轴 导航 ”一 “ 单 击 
以 转 到 下 一 帧 并 停止 ”， 双 击 后 ， 给 右边 的 按钮 设置 单 击 跳 转 下 一 张 图片 的 互动 代码 ， 如 
图 10.67 所 示 。 


stop(); 

* 单 击 以 转 到 

m 击 指 ' 

an02. addEventListener (MouseEvent. CLICK, £1_ClickToGoToNextFrane); 
function £1_ClickToGoToNextFrane (event :MouseEvent) :void 


nextFrane () ;| 








图 10.67 设置 转 到 下 一 帧 并 停止 代码 
6) 用 同样 的 方法 单 击 舞台 上 的 “a01” 按 钮 ， 打 开 “ 代 码 片段 ”面板 一 “时 间 轴 导航 ” 
一 “ 单 击 以 转 到 前 一 帧 并 停止 ”， 双 击 给 左边 的 按钮 设置 单 击 跳 转 上 一 张 图 片 的 互动 代码 ， 
最 后 调整 背景 色 ， 测 试 完成 “ 单 击 切换 画册 ”互动 动画 的 制作 ， 如 图 10.68 所 示 。 








图 10.68 “ 单 击 切换 画册 ”的 完成 效果 
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【 例 10.20】 ”制作 移动 设备 划 屏 切换 动画 ， 如 图 10.69 所 示 。 








新 建 AIR for i0S 文 件 ， 宽 640， 高 1136 


四 一 一 


在 每 帧 上 添加 停止 代码 





插入 “滑动 以 转 到 下 /上 一 帧 并 停止 ”代码 








测试 时 出 现 “手机 模拟 器 ” 选择 相应 选项 


图 10.69 ”移动 设备 划 屏 切换 动画 


制作 过 程 如 下 : 


1) 在 Flash 中 新 建 一 个 AIR for iOS 文件 ， 宽 度 640 像素 ， 高 度 1136 像素 。 单 1 





*201。 





导入 


到 舞台 ， 找 到 素材 的 “素材 -手机 APP1” 至 “素材 -手机 APP4” 文 件 ， 将 它们 导入 到 舞台 











缩放 到 合适 大 小 。 








中 央 。 全 选 图 片 素材 ， 右 键 单 击 分 布 到 关键 帧 ， 为 每 个 关键 帧 导入 1 张 “ 图 片 ”文件 ， 并 


2) 在 每 一 帧 上 设置 停止 动作 ， 单 击 关键 帧 ， 打 开 “ 动 作 ” 面 板 ， 输 入 “stop0:” 代 码 。 
3) 打开 双击 执行 “窗口 ”一 “代码 片段 ”一 “ActionScript” 一 “移动 操作 ”一 “滑动 
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以 转 到 下 /上 一 帧 并 停止 ”代码 。 

4) 测试 影片 ， 弹 出 “手机 模拟 器 ”窗口 ， 在 “TOUCH AND GESTURE” 中 为 “Touch 
layer” 选 项 打 钓 ， 并 且 选 中 “Gesture” 中 的 “Swlpe” 选 项 ， 夯 面 中 出 现 移 动 划 屏 光标 ， 
即 可 用 鼠标 模拟 测试 手机 滑动 切换 效果 。 
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下 面 讲解 例 10.2 中 Flash 网 页 片头 动画 的 制作 过 程 ， 实 例 中 综合 应 用 了 图 形 、 文 本 动 
画 的 制作 ， 添 加 声音 文件 ， 利 用 ActionScript 脚本 语言 等 设计 制作 方法 表现 效果 ， 通 过 多 
种 元 件 与 交互 设计 结合 完成 实例 设计 ， 如 图 10.70 所 示 。 


革 © © 


按钮 单 击 的 三 种 互动 效果 












合 ， 在 顶层 添加 声音 


com 












通过 “代码 片段 "面板 ， 在 最 后 一 帧 上 添加 “停止 ”代码 。 为 “按钮 1” 添 加 
“ 单 击 以 转 到 Web 页 ”代码 ， 为 按钮 2 添加“ 单 击 以 停止 所 有 声音 ”代码 


图 10.70 了 Flash 网 页 片头 动画 的 制作 过 程 





测试 完成 动画 制作 
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制作 过 程 如 下 : 

1) 绘制 背景 ， 新 建 一 个 文档 ，800X500 像素 ， 背 景 颜 色 为 白色 。 首 先 设计 背景 画面 ， 
新 建 一 个 层 ， 命 名 为 “背景 ”， 导 入 “三 叶 草 jpg” 背 景 素材 图 片 ， 缩 放 到 舞台 尺寸 ， 覆 
盖 全 部 舞台 。 新 建 一 层 ， 命 名 为 “渐变 ” 层 ， 绘 制 与 舞台 大 小 一 致 的 矩形 ， 填 充 颜色 设置 
为 “线性 渐变 ”， 设 置 两 边 深 绿 、 中 间 浅 绿 的 过 渡 色 ， 中 间 的 浅 绿色 透明 度 为 “20%”， 
制作 两 边 深 、 中 间 浅 的 背景 效果 。 在 渐变 色 之 上 建立 “ 横 条 ”和 “小 字 ” 图 层 ， 分 别 绘制 
顶部 装饰 边 条 并 标 上 网 址 ， 完 成 背景 的 整体 静态 装饰 设计 。 

2) 制作 动态 背景 效果 ， 将 “背景 ”图 层 的 三 叶 草图 转换 为 图 形 元 件 ， 在 第 50 帧 建立 
关键 帧 ， 将 第 一 帧 “属性 ”面板 的 色彩 效果 设置 为 黑色 ， 在 黑色 到 正常 色 的 帧 中 间 单 击 右 
键 创建 “ 传 统 补 间 ”动画 ， 完 成 渐变 背景 的 制作 。 

3) 制作 标题 字 底板 飞 入 动画 效果 ， 新 建 图 层 ， 命 名 为 “ 灰 底 ”， 单 击 “ 和 矩形 ”工具 ， 
设置 填充 为 白色 ， 透 明度 72%， 无 边框 。 绘 制 矩形 ， 置 于 舞台 中 央 。 用 钢笔 工具 将 矩形 左 
下 角 与 右上 角 转 变 为 弧 形 ， 转 换 为 影片 剪辑 并 设置 属性 中 的 混合 模式 为 “ 释 加 ”。 在 第 10 
帧 、 第 13 帧 和 第 15 帧 建立 关键 帧 ， 创 建 传统 补 间 动 画 。 第 1 帧 的 位 置 放置 在 舞台 的 右边 
工作 区 ， 第 10 帧 和 第 15 帧 的 位 置 不 变 ， 第 13 帧 的 位 置 在 第 10 帧 位 置 的 基础 上 向 左 偏 移 
20 像素 ， 模 拟 惯性 动作 的 动画 表现 ， 使 “灰色 ”面板 入 的 动画 更 加 生动 。 

4) 制作 右 侧 轮 播 图 片 效果 ， 新 建 影片 剪辑 ,命名 为 “图 片 ”, 选择 “文件 ”菜单 一 “ 导 
入 ”选项 ~“ 导 入 到 库 ” 命 令 。 导 入 四 张 素材 图 片 到 影片 剪辑 ， 中 独立 的 图 层 ， 每 个 图 层 
一 张 素材 图 片 ， 分 别 命名 为 “图 1”、“ 图 2”、“ 图 3”、“ 图 4”。 在 “图 1” 层 的 素 
材 图 上 单 击 右键 ， 选 择 “ 转 换 为 图 形 元 件 ”， 在 第 30 帧 和 第 40 帧 建立 关键 帧 ， 将 第 40 
帧 的 图 片 元 件 的 属性 一 色彩 样式 Alpha 值 设置 为 “0%”， 然 后 于 第 30 关键 帧 与 第 40 关 
键 帧 之 间 建 立 传统 补 间 动 画 ， 制 作 从 有 到 无 的 图 片 过 渡 动 画 。 依 次 为 “图 2”、“ 图 3”、 
“图 4” 图 层 建立 同样 的 动画 效果 。 完 成 后 点 选 “ 图 层 2” 所 有 帧 ， 在 时 间 轴 上 向 后 拖 忠 30 
帧 位 置 ， 将 “图 2” 的 起 始 帧 与 “图 1” 对 齐 ， 制 作 一 张 图 片 逐渐 消失 、 另 一 张 图 片 出 现 的 
动画 效果 。“ 图 3” 与 “图 4” 方向 一 致 ， 依 次 比 上 一 图 层 向 后 拖 30 帧 ， 最 后 在 最 底层 建 
立 “ 图 1 副本 ” 层 ， 放 置 一 张 “图 1” 中 的 素材 作为 衬 底 。 将 “图 片 ” 影 片 剪辑 拖 入 舞台 
中 新 建 的 图 层 上 ， 在 层 的 上 方 建立 圆 形 遮 单 层 ， 完 成 右 侧 循环 图 片 动画 的 制作 。 

5) 制作 遮 单 毛笔 笔触 边框 动画 效果 , 复制 谈 单 圆 形 边线 到 新 图 层 的 第 25 帧 , 使 用 “ 工 
其 ”一 “宽度 工具 ”选项 ， 将 圆 形 边线 调整 为 粗细 变化 的 毛笔 笔触 线条 ， 转 换 为 元 件 ， 在 
第 50 帧 插入 关键 帧 ， 单 击 右键 加 上 传统 补 间 动 画 ， 属 性 设置 为 顺 时 针 旋 转 一 周 ， 调 整 第 
25 帧 边框 大 小 完成 遮 淖 图 层 的 边框 制作 。 最 后 复制 边框 动画 到 新 建 的 “小 边框 ”影片 剪辑 
中 ， 修 改 大 小 ， 制 作 备 用 动画 素材 ， 为 按钮 和 整体 动画 添加 动态 装饰 边线 ， 使 用 时 从 库 中 
拖 动 到 合适 位 置 ， 丰 富 画 面 效果 。 

6) 制作 文字 特效 一 文字 飘 出 效果 。 新 建 图 层 ， 命 名 为 “版 头 字 ”， 在 第 25 帧 插入 
关键 帧 ， 输 入 文本 标题 “网 页 片头 动画 ”并 转换 为 影片 剪辑 ， 双 击 进入 元 件 内 部 。 在 “网 
页 片头 动画 ”上 单 击 右键 ， 选 择 “ 分 散 ”两 次 ， 再 单 击 右键 ， 选 择 “ 分 散 到 图 层 ”。 给 每 
层 都 放置 一 个 打 散 的 文字 ， 按 住 Shift 键 ， 将 元 件 内 所 有 图 层 的 第 1 帧 选中 ， 一 起 拖 到 第 6 
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帧 ， 然 后 在 每 层 的 第 1 帧 绘制 一 个 字体 大 小 的 正方 形 ， 置 于 舞台 左 侧 之 外 ， 为 所 有 图 层 的 
第 1 至 第 6 帧 建立 形状 补 间 动 画 ， 并 依 此 选中 图 层 ， 向 后 拖 动 5 帧 ， 完 成 文字 依 此 变形 出 
现 的 动画 效果 。 小 字 参 照 “ 标 题字 底板 ”方法 制作 动画 ， 完 成 标题 文字 动画 特效 。 

7) 制作 按钮 按 下 效果 。 新 建 图 层 ， 绘 制 一 个 圆 形 ， 转 换 为 按钮 元 件 ， 在 按钮 元 件 内 新 
建 图 层 ， 键 入 “进入 首页 ”文字 内 容 ， 分 别 在 “ 弹 起 ”、“ 指 针 经 过 ”、“ 按 下 ” 帧 调整 不 
同 的 颜色 ， 完 成 按钮 制作 。 音 乐 按钮 制作 与 之 类 似 ， 只 是 文字 内 容 不 同 ， 大 小 有 所 变化 。 

8) 添加 互动 特效 。 将 动画 播放 磁头 放 在 时 间 轴 的 第 50 帧 上 ， 双 击 “ 窗 口 ” 一 “代码 
片段 ”面板 ， 选 择 “ActionScript” 一 “时 间 轴 导航 ”一 “在 此 帧 处 停止 ”命令 ， 添 加 停止 
动作 代码 ， 使 动画 播放 到 第 50 帧 就 停 下 并 循环 播放 当前 帧 动 效 。 单 击 “ 首 页 进入 ”按钮 ， 
在 属性 中 命名 为 “a_01”。 打 开 “ 代 码 片段 ”面板 ， 然 后 双击 “ActionScript” 一 “动作 ” 
一 “ 单 击 以 转 到 Web 页 ”按钮 。 进入 “动作 ”面板 , 将 URL 地 址 改 成 “www.wqbook.com”， 
完成 跳 转 网 页 代码 的 添加 。 

9) 建立 可 控 背 景 音乐 ， 新 建 图 层 ， 命 名 为 “声音 ”， 导 入 MP3 音乐 文件 ， 为 动画 添 
加 背景 音乐 。 然 后 单 击 “ 停 止 music” 按 钮 ， 在 属性 中 命名 为 “a_02”。 新 打开 “代码 片 
段 ” 面 板 ， 双 击 “ActionScript” 一 “音频 和 视频 ”一 “ 单 击 以 停止 所 有 声音 ”按钮 ， 完 成 
对 背景 音乐 的 控制 设置 。 

10) 最 后 选择 “文件 ”菜单 一 “导出 ”选项 一 “导出 影片 ”命令 ， 命 名 为 “Flash 片头 
动画 .swf”， 制 作 完 成 。 














小 结 


本 章 主要 介绍 了 Flash 软件 的 使 用 : 

1. 使 用 Flash 创建 文本 、 编 辑 位 图 和 矢量 图 形 、 处 理 Flash 文本 特效 。 
2. 使 用 Flash 创建 形状 渐变 动画 和 运动 渐变 动画 。 

3. 为 Flash 文件 添加 声音 和 视频 ， 利 用 Flash 动作 面板 ， 制 作 交互 动画 。 


练 习 题 


1. Flash 文档 的 扩展 名 是 什么 ?导出 的 默认 Flash 影片 的 扩展 名 是 什么 ? 
2. Flash 动画 分 为 哪 几 种 ? 有 什么 区 别 ? 

3. 什么 是 元 件 ? 什么 是 实例 ? 元件 与 实例 的 区 别 和 联系 是 什么 ? 

4. 遮 罩 层 的 作用 是 什么 ?引导 层 的 作用 是 什么 ? 
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上 机 实验 


1. 背景 知识 

根据 所 学 的 Flash 的 基本 知识 ， 同 时 结合 网 页 设计 的 相关 知识 及 本 教材 中 讲 过 的 页 面 
布局 和 修饰 技巧 ， 还 要 注意 色彩 在 制作 过 程 中 的 应 用 等 。 

2. 实验 准备 工作 

将 相应 的 样 图 、 素 材 ， 如 音频 、 视 频 、 位 图 等 文件 发 送 到 学 生 主机 ， 以 供 学 生 参 考 
使 用 。 

3. 实验 要 求 

(1) 制作 形状 渐变 动画 。 要 求 : 根据 给 定 素 材 ， 利 用 形状 渐变 制作 动画 效果 ， 效 果 如 
图 10.71 所 示 。 

(2) 制作 沿路 径 运动 动画 。 要 求 : 根据 给 定 的 素材 制作 蝴蝶 在 花丛 中 左 飞 右 飞 的 效果 ， 
如 图 10.72 所 示 。 











图 10.71 形状 渐变 图 10.72 ”运动 动画 


(3) 制作 利用 遮 黑 层 的 动画 。 要求: 利用 遮 罩 层 的 功能 制作 赵 光 灯 效 果 , 效果 如 图 10.73 
所 示 。 





图 10.73 昭光 灯 效 果 





(4) 制作 切换 画册 。 要 求 : 设计 画面 , 添加 声音 , 利用 交互 动作 ,制作 流畅 的 Flash 画 
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册 ， 效 果 如 图 10.74 所 示 。 





图 10.74 切换 画册 


4. 课时 安排 


实验 安排 课时 为 6 课时 ， 第 1) 项 和 第 2) 项 实验 要 求 共 为 2 课时 ， 其 余 各 项 实验 要 求 各 
为 2 课时 。 


5. 实验 指导 


1) 制作 补 间 形状 

(1) 在 第 一 层 ， 使 用 “绘图 ”工具 ， 并 在 “属性 ”面板 中 设置 填充 和 笔触 效果 ， 设 计 
舞台 画面 一 一 蓝天 、 青 山 、 笔 直 的 公路 ， 然 后 分 别 导 入 三 幅 位 图 一 一 carpng、plane.png、 
bird.png 到 库 中 。 

(2) 新 建 一 层 ， 打 开 “ 库 ” 面板， 将 car.png 拖 到 舞台 中 。 选 择 “ 修 改 ” 菜 单一 “位 图 ” 
选项 一 “转换 位 图 为 矢量 图 ”命令 ,弹出 “转换 位 图 为 矢量 图 ”对 话 框 ,设置 相应 的 参数 ， 
单 击 “ 确 定 ” 按 钮 。 

(3) 用 “任意 变形 ”工具 缩放 图 形 , 在 第 15 帧 , 插入 关键 帧 , 将 汽车 图 移动 一 些 距离 。 

(4) 单 击 第 75 帧 , 插入 关键 帧 , 将 “ 库 ” 面 板 中 的 plane.png 位 图 拖 到 舞台 中 , 与 carpng 
位 置 重合 。 将 carpng 删除 ， 将 plane.png 转换 为 矢量 图 。 单 击 第 80 帧 ， 插 入 关键 帧 ， 将 
plane.png 向 上 移动 一 段 距离 。 

(5) 单 击 第 130 帧 , 插入 关键 帧 , 将“ 库 ” 面板 中 的 bird.png 拖 到 舞台 中 ,与 plane.png 
位 置 重合 。 将 plane.png 删除 ， 将 bird.png 转换 为 矢量 图 ， 将 birdpng 向 上 移动 一 段 距离 。 
在 每 两 个 关键 帧 之 间 创 建 补 间 形 状 。 

(6) 选择 “文件 ”菜单 一 “导出 ”选项 一 “导出 影片 ”命令 ， 制 作 完成 。 








2) 制作 沿路 径 运 动 动画 
(1) 导入 一 幅 位 图 到 舞台 中 ， 将 此 层 命名 为 “背景 ”， 大 小 与 文档 相同 ， 为 550 X400 
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像素 ， 锁 定 背景 层 。 

(2) 导入 4 个 蝴蝶 位 图 到 “ 库 ” 面 板 中 ， 新 建 一 层 ， 将 一 个 蝴蝶 位 图 拖 到 场景 中 ， 放 
在 一 个 花 休 上 ， 按 下 F8 键 ， 转 换 为 flyl 影片 剪辑 元 件 。 双 击 进入 编辑 状态 ， 选 中 位 图 ， 
按 下 F8 键 ， 转 换 为 flyla 图 形 元 件 。 单 击 第 3 帧 ， 插 入 关键 帧 ， 选 中 图 形 实例 ， 单 击 “ 任 
意 变形 ”工具 ， 纵 向 缩小 图 形 。 单 击 第 1 帧 ， 设 置 创建 传统 补 间 ， 效 果 是 蝴蝶 快速 地 肩 动 
翅膀 。 其 他 蝴蝶 制作 的 方法 相似 ， 蝴 蝶 快 速 地 扇 动 翅膀 。 共 有 四 个 蝴蝶 ， 两 个 大 、 两 个 小 。 

(3) 返回 到 场景 中 ， 将 四 个 蝴蝶 元 件 拖 到 场景 中 ， 并 放 在 不 同 的 图 层 中 ， 两 个 小 蝴蝶 
放 在 一 条 花 上 ， 只 有 一 个 关键 帧 ， 位 置 不 发 生变 化 。 

(4) 另外 两 个 大 蝴蝶 沿路 径 运动 。 两 个 蝴蝶 在 不 同 的 层 中 ， 插 入 两 个 引导 层 ， 绘 制 路 
径 ， 每 一 个 引导 层 引导 一 只 蝴蝶 的 运动 轨迹 。 分 别 插入 若干 关键 帧 ， 修 改 不 同 关键 帧 处 的 
位 置 即 可 ， 实 现在 花 条 处 短 时 停留 ， 然 后 飞 走 。 最 后 导出 影片 。 时 间 轴 如 图 10.75 所 示 。 

















Ideieel 中 C 名 中 本 [ 


图 10.75 时 间 轴 


3) 制作 利用 谈 章 层 的 动画 

(1) 单 击 “ 钢 笔 ” 工 具 ， 绘 制 一 条 曲线 ， 转 换 为 图 形 元 件 。 选 中 曲线 实例 ， 单 击 “ 任 
意 变 形 ” 工 具 ， 将 变形 基准 点 移 到 左 侧 的 项 点。 然后 打开 “变形 ”面板 ， 旋 转 输 入 30 度 ， 
连续 单 击 “ 重 制 选区 和 变形 ”按钮 ， 形 成 需 光 灯 灯 的 架 。 

(2) 新 建 一 层 ， 将 灯 架 层 的 关键 帧 复制 到 新 建 的 层 中 。 再 新 建 一 层 ， 绘 制 一 个 填充 七 
彩 渐变 色 的 圆 , 将 此 层 置 于 中 间 层 。 设 置 创 建 传统 补 间 ， 圆 从 小 变 大 ， 大 到 覆盖 整个 灯 架 ， 
如 图 10.76 所 示 。 









图 10.76 党 虹 灯 的 灯 架 





(3) 单 击 最 上 层 ， 选 中 灯 架 图 形 ， 两 次 按 下 Ctrl+B 组 合 键 ， 打 散 ， 选 择 “ 修 改 ” 菜 单 
一 “将 线条 转换 为 填充 ”命令 ， 将 层 的 属性 设置 为 遮羞 层 。 动 画 制作 完成 。 
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4) 制作 切换 画册 

(1) 在 Flash 中 新 建 一 个 文件 ， 找 到 素材 的 “图 片 1” 至 “图 片 3” 文 件 ， 将 新 建文 件 
中 的 图 层 1 命名 为 “图 片 层 ” 并 按 顺 序 建立 3 个 连续 的 关键 帧 , 在 每 个 关键 帧 导入 1 张 “ 图 
片 ” 文 件 ， 并 缩放 到 合适 大 小 。 

(2) 新 建 图 层 ， 命 名 为 “ 遮 凋 层 ”。 绘 制 圆 角 矩 形 ， 并 将 谈 单 应 用 于 “图 片 ” 层 ， 使 
图 片 完全 显示 于 圆 角 矩形 内 。 

(3) 新 建 图 层 ， 命 名 为 “按钮 层 ”， 在 第 3 帧 插入 帧 。 填 充 绘制 并 完成 一 个 按钮 元 件 ， 
复制 一 个 按钮 ， 旋 转 合适 的 方向 ， 使 两 个 按钮 元 件 放置 在 图 册 两 边 ， 用 来 承担 前 后 翻 页 的 
控制 点 。 打 开 “ 属 性” 面板， 将 左边 的 按钮 实例 命名 为 “a01”， 将 右边 的 按钮 实例 命名 为 
“a02”。 

(4) 单 击 图 层 的 第 一 帧 ， 打 开 “ 动 作 ” 面 板 ， 键 入 “stop0:” 代 码 ， 在 第 一 帧 建立 停止 
播放 代码 。 

(5) 单 击 舞 台 上 的 按钮 元 件 “a02”， 打 开 “ 代 码 片段 ”面板 一 “时 间 轴 导航 ”一 “ 单 
击 以 转 到 下 一 帧 并 停止 ”， 双 击 后 给 右边 的 按钮 设置 单 击 以 跳 转 下 一 张 的 互动 代码 。 

(6) 单 击 舞 台 上 的 “a01” 按 钮 元 件 ， 打 开 “ 代 码 片 段 ”面板 一 “时 间 轴 导航 ”一 “ 单 
击 以 转 到 前 一 帧 并 停止 ”， 双 击 后 给 左边 的 按钮 设置 单 击 以 跳 转 上 一 张 图 片 的 互动 代码 。 
最 后 调整 背景 色 ， 测 试 完成 “ 单 击 切换 画册 ”互动 动画 的 制作 。 
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本 章 首先 介绍 Photoshop CC 软件 的 操作 方法 , 然后 通过 多 个 图 像 设 计 和 网 页 实例 的 设 
计 过 程 ， 讲 解 如 何 利用 Photoshop 进行 网 页 设计 。 


【本 章 学 习 目 标 】 
通过 本 章 学 习 ， 读 者 能 够 : 
e 了 解 Photoshop CC 的 工作 界面 
e 掌握 Photoshop CC 软件 操作 
e 掌握 利用 Photoshop CC 软件 进行 平面 设计 
e 掌握 利用 Photoshop CC 软件 进行 网 页 设计 


11.1 Photoshop CC 简介 


Adobe Photoshop 是 一 款 功 能 强大 的 图 像 处 理 软件 ， 由 美国 Adobe 公 司 在 1990 年 首次 推 
出 ， 在 图 像 处 理 和 电脑 绘图 领域 占据 重大 地 位 。 经 过 多 次 更 新 换代 ， 功 能 不 断 增强 与 完善 ， 
最 新 推出 的 Photoshop CC， 新 增加 了 许多 功能 ， 如 相机 防 拌 功能 、Camera RAW 修复 功能 改 
进 、Camera Raw 径 向 滤 镜 、Camera Raw 自 动 垂 直 功 能 等 ， 使 原 有 功能 更 加 完善 。 

Photoshop 的 应 用 领域 很 广泛 ， 在 图 像 、 网 页 设计 、 视 频 、Web 出 版 各 方面 都 有 涉及 。 
Photoshop 的 专长 在 于 图 像 处 理 ， 而 不 是 图 形 创作 ， 主 要 用 于 平面 设计 、 网 页 设计 、 绘 画 、 
标志 设计 、 数 码 照 片 处 理 及 一 些 后 期 处 理 等 方面 。 

1. 平面 设计 

平面 设计 是 Photoshop 应 用 最 为 广泛 的 领域 ， 无 论 是 我 们 正在 阅读 的 图 书 封面 ， 还 是 
在 大 街 上 看 到 的 招贴 海报 ， 这 些 具 有 丰富 图 像 的 平面 印刷 品 ， 基 本 上 都 需要 用 Photoshop 
软件 对 图 像 进行 处 理 ， 如 图 11.1 所 示 。 





2. 修复 照片 

Photoshop 具有 强大 的 图 像 修饰 功能 。 利 用 这 些 功 能 ， 可 以 快速 修复 一 张 破损 的 老 照 
片 ， 也 可 以 修复 人 脸 上 的 斑点 等 缺陷 ， 如 图 11.2 所 示 。 

3. 广告 摄影 


广告 摄影 作为 一 种 对 视觉 要 求 非常 严格 的 工作 ， 其 最 终 成 品 往往 要 经 过 Photoshop 的 
修改 才能 得 到 满意 的 效果 ， 如 图 11.3 所 示 。 
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月 栖 湖 左 ， 云 栖 湖 有 ， 温 朱 岛 上 





图 11.1 平面 设计 





图 11.2 修复 照片 





图 11.3 广告 摄影 
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4. 影像 创意 

影像 创意 是 Photoshop 的 特长 ,通过 Photoshop 的 处 理 可 以 将 原本 风 马 牛 不 相 及 的 对 象 
组 合 在 一 起 , 也 可 以 使 用 “狸猫 换 太 子 ” 的 手段 使 图 像 发 生 面目 全 非 的 巨大 变化 , 如 图 11.4 
所 示 。 























图 11.4 影像 创意 


5. 艺术 文字 
当 文字 遇 到 Photoshop 处 理 , 就 已 经 注定 不 再 普通 。 利用 Photoshop 可 以 使 文字 发 生 各 
种 各 样 的 变化 ， 并 利用 这 些 艺 术 化 处 理 后 的 文字 为 图 像 增 加 效果 ， 如 图 11.5 所 示 。 


© 


图 11.5 艺术 文字 
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6. 图 标 制作 


虽然 使 用 Photoshop 制作 图 标 在 感觉 上 有 些 大 材 小 用 ， 但 使 用 此 软件 制作 的 图 标的 确 
非常 精美 ， 如 图 11.6 所 示 。 














图 11.6 图 标 制作 


7. 网 页 设计 


网 络 的 普及 是 促使 更 多 人 需要 掌握 Photoshop 的 一 个 重要 原因 。 因 为 在 设计 网 页 时 ， 
Photoshop 是 必 不 可 少 的 网 页 设计 处 理 软件 ， 如 图 11.7 所 示 。 


Ch str oa 


名 ) 品味 来 港澳 的 精品 美食 
了 其。 体验 来 自 沈 江 的 饮食 文化 








图 11.7 网 页 设计 


8. 软件 界面 设计 

软件 界面 设计 是 一 个 新 兴 的 领域 ， 已 经 受到 越 来 越 多 的 软件 企业 及 开发 者 的 重视 ， 虽 
然 暂时 还 未 成 为 一 种 全 新 的 职业 ， 但 相信 不 和 久 一 定 会 出 现 专业 的 界面 设计 师 。 在 当前 还 没 
有 用 于 做 界面 设计 的 专业 软件 ， 因 此 绝 大 多 数 设计 者 使 用 的 都 是 Photoshop， 如 图 11.8 
所 示 。 
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图 11.8 软件 界面 设计 


11.2 “Photoshop CC 工作 界面 


Photoshop CC 的 工作 界面 由 “菜单 ” 栏 、“ 属 性 ” 栏 、“ 图 像 编辑 ”窗口 、 状 态 栏 、 工 
具 箱 、 控 制 面板 等 组 成 ， 如 图 11.9 所 示 。 
Ps xft6 WES 图 你 


， 昌明 中国 


+1 0 333%hGs 


HD 


控制 面板 


7AWPeNNhA 


“图 像 编辑 ”窗口 


pg 


El 





图 11.9 ”Photoshop CC 工作 界面 
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1. 菜单 栏 

菜单 栏 为 整个 Photoshop 环境 下 的 所 有 窗口 提供 菜单 控制 ， 包 括 “ 文 件 ”、“ 编 辑 ”、 
“图 像 ” 四 “图 层 ” 国 “选择 ” 本 “ 滤 镜 ” 训 “视图 ” “和 窗口 99 和 “帮助 ” 九 项 。 

了 Photoshop 中 通过 两 种 方式 执行 所 有 命令 : 一 是 菜单 ， 二 是 快捷 键 或 组 合 键 。 

2. “属性 ” 栏 
“属性 ” 栏 是 动态 变化 的 ， 选 中 某 个 工具 后 ，“ 属 性 ” 栏 就 会 改变 成 相应 工具 的 属性 
设置 选项 ， 可 更 改 相应 的 选项 。 

3. “图 像 编 辑 ” 窗 口 


“图 像 编 辑 ” 窗 口 是 Photoshop 的 主要 工作 区 ， 用 于 显示 图 像 文件 。“ 图 像 编辑 ”窗口 
带 有 自己 的 标题 栏 ， 提 供 了 打开 文件 的 基本 信息 ， 如 文件 名 、 缩 放 比 例 、 颜 色 模式 等 。 

如 果 同 时 打开 了 两 幅 图 像 ， 可 通过 单 击 图 像 窗 口 进行 切换 。 切 换 图 像 窗 口 可 使 用 
CtrlHTab 组 合 键 。 


4. 工具 箱 

工具 箱 中 的 工具 可 用 来 选择 、 绘 画 、 编 辑 以 及 查看 图 像 。 拖 动工 具 箱 的 标题 栏 ， 可 移 
动工 具 箱 。 有 些 工具 的 右 下 角 有 一 个 小 三 角形 符号 ， 这 表示 在 工具 位 置 存在 一 个 工具 组 ， 
其 中 包括 若干 个 相关 工具 。 

当 单 击 选中 工具 时 ，“ 属 性 ” 栏 会 显示 该 工具 的 属性 。 

5. 控制 面板 

Photoshop CC 有 多 个 面板 ， 可 通过 “窗口 ”菜单 一 “显示 某 一 项 ”, 来 显示 某 个 面板 。 

按 Tab 键 ， 自 动 隐藏 控制 面板 、“ 属 性 ” 栏 和 工具 箱 ， 再 次 按键 ， 显 示 以 上 组 件 。 按 
Shift+Tab 组 合 键 ， 隐 藏 控制 面板 ， 保 留 工具 箱 。 























11.3 Photoshop CC 基本 应 用 


11.3.1 ”Photoshop CC 基本 操作 


1. 变换 图 像 


在 图 像 编 辑 过 程 中 ， 有 时 需要 对 图 像 进行 拉 伸 、 挤 压 、 旋 转 或 其 他 形式 的 更 改 。 这 些 
操作 可 以 通过 “编辑 ”菜单 一 “变换 ”选项 中 的 某 一 项 来 实现 ， 如 图 11.10 所 示 。 

各 项 的 功能 如 下 : 

缩放 : 缩放 操作 通过 沿 着 水 平和 垂直 方向 拉 伸 或 挤 压 图 像 内 的 一 个 区 域 来 修改 该 区 域 
的 大 小 。 




















第 11 章 ， 利 用 Photoshop 设计 网 页 。215。 


旋转 : 旋转 允许 用 户 改变 一 个 图 层 的 内 容 或 一 个 选择 区 域 的 对 角 方向 。 

斜 切 : 沿 着 单个 轴 ， 即 水 平 或 垂直 轴 倾 斜 一 个 选择 区 域 。 斜 切 的 角度 影响 最 终 图 像 倾 
斜 的 程度 。 要 想 斜 切 一 个 选择 区 域 ， 拖 动 边界 框 的 节点 即 可 。 

扭曲 ， 当 扭曲 一 个 选择 区 域 时 ， 用 户 可 以 沿 着 它 的 每 个 轴 进 行 拉 伸 操作 。 和 和 斜 切 不 同 
的 是 ， 倾 斜 不 再 局 限于 每 次 一 条 边 ， 设 定 一 个 角 ， 两 条 相 邻 边 将 沿 着 该 角 拉 伸 。 

透视 ， 挤 压 或 拉 伸 一 个 图 层 或 选择 区 域 的 单条 边 ， 进 而 向 内 外 倾斜 两 条 邻 边 。 

变形 : 可 以 对 图 像 进行 任意 拉 伸 ， 从 而 产生 各 种 变换 。 

自由 变换 的 快捷 键 : Ctrl+T。 



































用 再 次 内 Shift+Ctrl+T 

缩放 (S$) 

旋转 (R) 

人 (QO 

担 曲 (D) 

适 视 (P) 
清理 (R) 时 
Adobe PDF 预 设 。 二 
于 |。 旋转 90 度 (aj$+)(9) 
远 加 上 搞 _ 旋转 90 度 [时 针 )O) 
项 色 设置 (G)- Shit+Cul+k | 水 FM 
指定 配置 文件 ed) 


图 11.10 “变换 ”图 像 的 命令 


2. 选取 颜色 


网 页 中 的 色彩 有 些 是 通过 素材 图 像 自身 的 色调 形成 的 ， 而 有 些 则 是 通过 选择 、 填 充 制 
作出 来 的 。 在 Photoshop 中 既 可 以 独立 设置 颜色 ， 也 可 以 借用 现 有 的 颜色 。 

Photoshop 中 的 “ 色 板 ”控制 面板 中 包括 多 种 模式 的 颜色 ， 在 “ 色 板 ”控制 面板 的 上 
方 右 侧 选项 中 选择 一 种 颜色 模式 即 可 ， 如 图 11.11 所 示 。 





图 11.11 “ 色 板 ”控制 面板 





使 用 工具 箱 中 的 “吸管 ”工具 吸取 素材 图 像 中 的 某 种 颜色 ， 方 法 是 : 使用“ 吸管” 工 
具 在 图 像 中 单 击 ， 将 颜色 提取 到 前 景色 中 。 

3. 管理 图 层 

图 层 的 基本 工作 原理 就 是 将 构成 图 像 的 不 同 对 象 和 元 素 隔 离 到 独立 图 层 上 进行 编辑 
操作 。 组 成 图 像 的 各 个 图 层 就 相当 于 一 个 单独 的 文档 ， 相 互 堆 释 在 一 起 ， 透 过 上 一 个 图 层 
的 透明 区 域 可 以 看 到 下 一 个 图 层 中 的 不 透明 像素 ; 透 过 所 有 图 层 的 透明 区 域 ， 可 以 看 到 背 
景 图 层 ， 最 终 在 用 户 面 前 就 是 一 幅 完 整 的 平面 作品 。 
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“图 层 ” 控 制 面板 如 图 11.12 所 示 。 

第 一 行 按钮 依次 是 ， 选 取 滤 镜 类 型 、 像 素 图 层 过 滤器 、 调 整 图 层 过 滤器 、 文 字 图 层 过 

第 二 行 按钮 依次 是 : 设置 图 层 的 混合 模式 、 设 置 图 层 的 总 体 不 透明 度 。 

第 三 行 按钮 依次 是 : 锁定 透明 像素 、 锁 定 图 像 像 素 、 锁 定位 置 、 锁 定 全 部 和 设 定 图 层 
内 部 的 不 透明 度 。 

第 四 行 和 第 五 行 的 大 眼睛 是 图 层 可 见 性 按钮 ， 代 表 当 前 图 层 可 见 ， 单 击 后 变 为 隐藏 。 
第 五 行 的 锁 代 表 该 层 已 锁定 ， 不 可 编辑 。 

最 后 一 行 的 按钮 依次 是 : 链接 、 添 加 图 层 样 式 、 添 加 图 层 蒙 板 、 创 建新 的 填充 或 调整 
图 层 、 创 建新 组 、 创 建新 图 层 、 删 除 当前 图 层 。 

依据 按钮 功能 创建 各 种 功能 的 图 层 或 编辑 当前 图 层 ， 为 当前 图 层 添 加 效果 。 





图 11.12 “图 层 ”控制 面板 


1) 图 层 的 分 类 

在 Photoshop CC 中 ,图 层 的 类 型 有 很 多 ， 了 解 并 且 掌 握 不 同类 型 图 层 的 功能 及 特点 对 
于 正确 地 处 理 图 像 有 很 大 的 帮助 。 图 层 可 以 分 为 : 普通 图 层 、 文 字 图 层 、 填 充 或 调整 图 层 、 
样式 图 层 、 剪 贴 蒙 版 图 层 和 智能 对 象 图 层 等 。 


2) 图 层 的 混合 模式 

混合 模式 是 PhotoShop 最 强大 的 功能 之 一 ， 它 决定 了 当前 图 像 中 的 像素 如 何 与 底层 图 
像 中 的 像素 混合 ， 使 用 混合 模式 可 以 轻松 地 制作 出 许多 特殊 的 效果 。 可 将 混合 模式 分 为 六 
大 类 ; 

Q 组 合 模式 (正常 、 溶 解 ) 

@ 加 深 混合 模式 ( 变 暗 、 正 片 琶 底 、 颜 色 加 深 、 线 性 加 深 ) 

@@ 减 淡 混合 模式 ( 变 亮 、 滤 色 、 颜 色 减 淡 、 线 性 减 淡 ) 

@ 对 比 混合 模式 ( 琶 加 、 柔 光 、 强 光 、 亮 光 、 线 性 光 、 点 光 、 实 色 混 合 ) 

@ 比较 混合 模式 ( 差 值 、 排 除 ) 

@ 色彩 混合 模式 (色相 、 饱 和 度 、 颜 色 、 亮 度 ) 


3) 图 层 样式 
图 层 样 式 是 应 用 于 一 个 图 层 的 一 种 或 多 种 效果 。Photoshop 提供 了 各 种 效果 (如 阴影 、 
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发 光 和 和 斜面 ) 来 更 改 图 层 内 容 的 外 观 、 图 层 效果 与 图 层 内 容 链接 。 移 动 或 编辑 图 层 的 内 容 时 ， 
修改 的 内 容 会 应 用 相同 的 效果 。 

在 Photoshop 中 选择 “图 层 ” 菜 单一 “图 层 样式 ”命令 ,或 单 击 “ 图 层 ” 控 制 
方 的 “添加 图 层 样式 ”按钮 ， 弹 出 “图 层 样式 ”对 话 框 ， 如 图 11.13 所 示 。 

在 该 对 话 框 中 ， 左 侧 是 样式 的 所 有 分 类 ， 例 如 投影 、 斜 面 与 浮雕 、 渐 变 乔 加 等 。 图 层 
样式 可 以 多 项 选择 ， 这 样 效果 会 有 更 多 的 变化 。 选 项 背景 为 蓝 色 即 表 明 此 选项 处 于 工作 状 
态 ， 此 时 中 间 将 出 现 相应 的 参数 设置 ， 右 侧 是 操作 按钮 和 预览 效果 。 





板 下 











加 kV) 


填充 不 透明 度 提 : 一 D100 % 国 


通道 : 园 RB) 园 cG@ 加 sg 





图 11.13 “图 层 样式 ”对 话 框 


4. 绘制 路 径 


路 径 是 Photoshop 中 的 重要 工具 ， 主 要 用 于 光滑 图 像 选 择 区 域 及 辅助 抠 图 、 绘 制 光滑 
和 精细 的 图 形 、 定 义 画 笔 等 工具 的 绘制 轨迹 、 输 出 /输入 路 径 以 及 在 选择 区 域 之 间 转 换 。 

Photoshop 中 的 路 径 工具 包括 可 以 创建 的 贝 赛 尔 路 径 工 具 和 形状 路 径 工 具 ， 选 择 路 径 
工具 以 及 调整 路 径 工具 如 图 11.14 所 示 。 








， 房 讽 笔 具 
俏 自 由 识 笔 T 具 P 
4 兴 添 加 钢 点 I 具 


- 份 W# 宙 点 工具 
人 N 转换 点 工具 


。 从 路 径 选择 工具 A 


从 直接 选择 I 具 A 
CD) 
图 11.14 路 径 绘制 工具 





1) 贝 赛 尔 路 径 工具 
钢笔 工具 : 绘制 由 多 个 线段 连接 而 成 的 贝 赛 尔 曲线 。 
自由 钢笔 工具 : 可 以 自由 手绘 形状 路 径 。 
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2) 形状 路 径 工具 

和 矩形 工具 : 创建 算 形 路 径 。 

角 和 矩形 工具 : 创建 圆 角 和 矩形 路 径 。 
椭圆 工具 : 创建 椭圆 路 径 。 

多 边 形 工具 : 创建 多 边 形 或 星 形 路 径 。 


加 








3) 选择 路 径 工具 
路 径 选择 工具 : 选择 并 且 移动 整个 路 径 。 
直接 选择 工具 : 选择 并 且 调 整 路 径 中 节点 的 位 置 。 


4) 调整 路 径 工具 

添加 锚 点 工具 : 在 原 有 路 径 上 添加 节点 以 满足 调整 、 编 辑 路 径 的 需要 。 
删除 锚 点 工具 : 删除 路 径 中 多 余 的 节点 以 适应 路 径 的 编辑 。 
转换 点 工具 : 转换 路 径 节点 的 属性 。 





v 注 意 ， 

用 钢笔 工具 绘制 直线 时 ， 同 时 按 下 Shift 键 将 绘制 到 45 度 的 直线 ; 用 钢笔 工具 绘制 曲 
线 时 ， 在 节点 处 按 下 Alt 键 可 转换 曲线 方向 ， 或 用 直接 选择 工具 修改 曲线 形状 ， 或 采用 钢 
笔 工 具 组 进行 修改 ， 比 如 转换 点 工具 等 ， 如 图 11.15 所 示 。 


进入 了 钳 点 时 的 方向 
a SS 
Pa C 1 
7 / 了 d 
/ ss D 
Ad 

从 和 连 点 出 发 时 的 方向 
从 和 错 点 出 发 时 的 方向 Ac 


进入 了 钳 点 时 的 方向 
图 11.15 用 钢笔 工具 绘制 贝 赛 尔 曲线 
【 例 11.1】 在 鼠标 之 间 绘 制 拟 合 曲线 。 
操作 步骤 如 下 : 
1) 用 钢笔 工具 围绕 鼠标 外 形 绘制 拟 合 曲线 。 
2) 用 直接 选择 工具 调整 节点 处 的 曲线 控制 柄 ， 在 合适 的 位 置 可 用 “调整 路 径 ” 工 具 添 
加 或 删除 节点 ， 如 图 11.16 所 示 。 
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图 11.16 在 鼠标 之 间 绘 制 拟 合 曲线 

【 例 11.2】 利用 矩形 工具 和 直接 选择 工具 绘制 图 形 。 

操作 步骤 如 下 : 

1) 用 矩形 工具 绘制 矩形 。 

2) 在 中 间 位 置 上 下 对 称 添加 四 个 节点 , 用 “直接 选择 ”工具 选择 中 间 右 侧 的 四 个 节点 ， 


向 上 移动 ， 如 图 11.17 所 示 。 





本 节点 位 置 
图 11.17 “利用 矩形 工具 和 直接 选择 工具 绘制 图 形 


【 例 11.3】 利用 绘图 工具 和 图 层 样式 绘制 彩色 的 苹果 ， 如 图 11.18 所 示 。 
操作 步骤 如 下 : 


1) 绘制 一 个 圆 形 ， 利 用 直接 选择 工具 调整 圆 的 形状 ， 使 之 接近 苹果 的 形状 ， 调 整 苹果 
上 下 位 置 时 ， 按 下 Alt 键 ， 转 换 节 点 。 


rr 





图 11.18 彩色 的 苹果 图 11.19 ”绘制 苹果 标志 


2) 再 绘制 苹果 被 咬 一 口 时 的 形状 ， 如 图 11.19 所 示 。 单 击 “ 椭 圆 ” 工 具 ， 在 “ 
栏 中 按 下 “ 打 孔 ”按钮 ， 如 图 11.20 所 示 ， 绘 制 一 个 小 圆 。 


PE 一 下 和 
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3) 添加 图 层 样式 : 内 阴影 、 内 发 光 、 斜面 和 浮屠 、 光泽 、 外 发 光 等 , 参数 如 图 11.21(a) 一 
(9) 所 示 。 





















































































































































































































































































































































一 内 发 光 
结构 
混合 模式 加 : | 让 色 ~ 
不 通明 度 O: 一 zy 一 [ 画 ]% 
杂 色 MG 一 | % 
闻 We @D OL Hs] 
混合 模式 加 ): [正片 委 底 四 | 图 素 
TENEo: 一 一 国 |] 方法 @): | 条 和 ~ 
角度 W: 人 一) [30 | 度 回 使 用 全 局 光 G) 源 : 〇 居中 但 。 @ 边 纤 (@) 
中 训 Q@: [5 | 像素 阻塞 @: (一 [0 % 
阻塞 Q: 一 [0 % 大 小 @): ET |5 像素 
大 小 9 四 一人 6 像素 = 
一 品质 
品质 
[ 等 高 线 : 注 用 据 占 ( 
等 高 线 :| S -| Dtss 0 Ld 
站 WE “om |» 
| | 拉 Eh OD: Co [| 
| 设置 为 默认 值 。 复位 为 默认 值 : 
设置 为 点 认 值 | 复位 为 默认 值 
图 11.21(a) 添加 图 层 样 式 ， 内 阴影 图 11.21(b) 添加 图 层 样式 ， 内 发 光 
介面 和 学 蝴 
一 结构 
样式 四 :| 内 笠 面 。 ~ 
方法 Q): [平时 。 ~ 
深度 @): 人 [oo |% 
7 向 :@ 上 OF 
大 小 @: 一 品名 来 | 
软化 : 一 一 [0 | 伪 素 | 
阴影 A 
角度 (NV) 、|[30 | 度 结构 ~ 
(3 
i 当 全 模式 @): [正片 民 四 | 
不 通明 度 (0): 一 |， 
4: | @"| Dnsteso 全 
角度 My: | 一 [19 | 度 
高 光 模式 员 : | 源 色 vIC 4 
不 通明 度 @): 一 [75 |% 让 直 ed 
阴影 模式 9): | 正片 到 底 -mm 区 
不 透明 朗 O: 一 [75 ]% sss: | A 团 反 相 人 0 
| 设置 为 点 认 什 | 夏 位 默认 信 设置 为 冉 认 什 | 夏 位 为 黑 认 入 
图 11.21(e) 添加 图 层 样式 : 斜面 和 浮雕 图 11.21(d) 添加 图 层 样式 ， 光泽 


4) 新 建 图 层 , 用 钢笔 工具 绘制 如 图 11.21(D 所 示 的 条 状 图 形 区 域 ,并且 填充 相应 颜色 。 
在 图 层 上 创建 剪贴 蒙 版 ， 最 后 调整 图 层 的 混合 模式 ， 上 方 彩 条 为 “ 变 亮 ”， 下 方 彩 条 为 “ 线 
性 光 ” 9 如 图 11.21(g) 所 示 ， 最 后 完成 。 
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外 发 光 
结构 


混合 模式 回 : 深 色 




















设 村 为 吉 认 值 | | 让 位 类 以 什 
图 11.21(e) 添加 图 层 样 式 ， 外 发 光 





图 11.21(f) 绘制 彩色 区 域 

















图 11.21(g) 彩色 区 域 图 层 混合 模式 的 设置 


5. 色彩 调整 

在 Photoshop 中 ， 要 想 做 出 精美 的 图 像 ， 色彩 模式 的 应 用 和 色彩 的 调整 是 必 不 可 少 的 。 
打开 一 幅 图 像 ， 选 择 “ 图 像 ” 菜 单一 “调整 ”选项 中 的 某 项 命令 ,还 可 选择 “ og 
“自动 对 比 度 ”/“ 自 动 颜色 ”命令 ， “调整” 选项 包括 : 亮度 /对 比 度 、 色 阶 、 曲 线 、 色 相 
/饱和 度 、 替 换 颜色 、 通 道 混合 器 、 反 相 、 闵 值 、 变 化 等 指令 ， 如 图 11.22 所 示 。 
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4) 选中 


6) 选中 




















自 ; 
自 ; 
自 ; 









图 像 大 小 (D).… 
画布 大 小 (S)- Alt+Ctrl+C 
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动 色调 (N) Shift+Ctrl+L 
动 对 比 度 (U) At+Shift+Ctrl+L 
动 磊 色 (O) Shift+Ctrl+B 






Alt+Ctrl+I 


|。 证 千 B)-. CurltB 


可 远 若 色 (S).… 


阴影 /高 光 (W)… 
HDR 色调 . 
变化 


去 色 (D) Shift+Ctrl+U 
匹配 霹 色 (M)… 

蔡 搞 颜色 (R)… 
色调 均 化 (Q) 


图 11.22 色彩 调整 命令 
【 例 11.4】 通过 Photoshop 色彩 调整 让 照片 变 为 上 古色古香 效果 ， 如 图 11.23 所 示 。 





图 11.23(a) 原 图 图 11.23 (b) ”处理 后 的 古色 上古 香 图 像 


操作 步骤 如 下 : 

1) 打开 一 张 照片 ， 先 把 背景 复制 为 两 个 背景 拷贝 ， 如 图 11.24(a) 所 示 。 

2) 选择 背景 拷贝 ， 选 择 菜单 “图 像 ” 一 “调整 ”一 “去 色 ”， 接 着 设置 亮度 和 对 比 
度 ， 参 数 如 图 11.24(b) 所 示 。 

3) 选择 背景 拷贝 2， 然 后 选择 “图 像 ” 一 “调整 ”一 “照片 滤 镜 ”， 选 择 黄色 ， 然 后 
把 浓度 调 到 100。 


EE 
月 是 


站 是 . 
月 慰 





拷贝 ,把 图 层 混合 模式 改 为 明度 。 
5) 再 次 选中 背景 拷贝 ?， 把 图 层 模 式 改 为 个 加 。 


拷贝 ， 月 





日 魔术 棒 选 择 空白 处 ， 选 中 图 像 中 的 偏 白 部 分 。 


7) 保持 选取 ， 单 击 “ 选 择 ” 菜 单一 “修改 ”选项 一 “羽化 ”命令 ， 将 羽化 设置 为 5 
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像素 ， 如 图 11.24(c) 所 示 。 
8) 在 工具 箱 中 设置 前 景色 为 白色 、 背 景色 为 黄色 ， 如 图 11.24(d) 所 示 。 
9) 在 “图 层 ” 控 制 面板 上 ， 单 击 “ 创 建新 的 填充 或 调整 图 层 ” 按 钮 ， 选 择 “ 渐 
变 ”， 如 图 11.24(e) 所 示 。 设 置 渐变 填充 ， 颜 色 选 为 黄色 ， 参 数 设 置 如 图 11.24( 所 示 。 
这 样 ， 一 幅 充满 古城 特色 的 照片 就 完成 了 ， 如 图 11.23(b) 所 示 。 






































自动 (A) 
团 预 拘 (P) 








Ix: 目 多 表 








图 11.24 色彩 调整 过 程 


6. 应 用 滤 镜 

滤 镜 是 Photoshop 的 特色 之 一 ， 具 有 强大 的 功能 。 滤 镜 产生 的 复杂 的 数字 化 效果 源 自 
摄影 技术 。 滤 镜 不 仅 可 以 改善 图 像 的 效果 并 且 掩 盖 其 缺陷 ， 还 可 以 在 原 有 图 像 的 基础 上 产 
生 许 多 特殊 的 效果 。Photoshop 的 内 置 滤 镜 共有 17 组 ， 可 以 通过 滤 镜 菜单 进行 访问 。 
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1) 滤 镜 库 

自从 Photoshop CS 引入 滤 镜 库 命 令 后 ， 对 很 多 滤 镜 都 提供 了 一 站 式 访 问 。 这 是 因为 在 
滤 镜 库 对 话 框 中 包含 6 组 滤 镜 ， 这 样 在 执行 滤 镜 命令 时 ， 特 别 是 当 想 对 一 幅 图 像 尝 试 不 同 
效果 时 ， 就 无 须 在 滤 镜 之 间 跳 来 跳 去 ， 而 是 在 同一 个 对 话 框 中 设置 不 同 的 滤 镜 效果 。 要 访 
问 滤 镜 库 ， 可 以 选择 “ 滤 镜 ”菜单 一 “ 滤 镜 库 ” 命 令 ， 如 图 11.25 所 示 ， 滤 镜 库 对 话 框 的 
名 称 是 随 所 选 滤 镜 的 名 称 而 定 的 。 

滤 镜 库 最 大 的 特别 之 处 在 于 应 用 滤 镜 的 显示 方式 与 图 层 相 同 。 默 认 情况 下 ， 滤 镜 库 中 
只 有 一 个 效果 图 层 ， 单 击 不 同 的 滤 镜 缩 略 图 ， 效 果 图 层 会 显示 相应 的 滤 镜 命令 。 

要 想 在 保留 滤 镜 效果 的 同时 添加 其 他 滤 镜 ， 可 以 单 击 右 下 角 的 “新 建 效 果 图 层 ” 按钮 ， 
与 当前 相同 滤 镜 的 效果 图 层 ， 然 后 单 击 应 用 其 他 滤 镜 即 可 。 


ET 














创建 














图 11.25 ” 滤 镜 库 对 话 框 


2) 智能 小 镜 

虽然 滤 镜 库 中 的 效果 图 层 可 以 为 同一 个 图 像 添 加 两 个 以 上 的 滤 镜 效果 ， 但 是 只 限于 在 
滤 镜 库 对 话 框 中 。 一 旦 关闭 滤 镜 库 对 话 框 ， 作 用 的 图 像 将 无 法 再 次 查看 混合 滤 镜 中 的 单个 
效果 。Photoshop CC 新 增 功能 中 的 智能 滤 镜 功能 解决 了 这 一 问题 。 

在 执行 滤 镜 命令 之 前 ， 首 先 执行 “ 滤 镜 ”菜单 一 “转换 为 智能 过 滤 ” 命 令 ， 当 前 图 层 
缩 览 图 出 现 智能 对 象 图 标 。 接 着 选择 “ 滤 镜 ”菜单 中 的 某 项 “ 滤 镜 ”命令 ， 智 能 图 层 出 现 
滤 镜 效果 图 层 ， 继 续 选 择 执行 “ 滤 镜 ”菜单 中 的 某 项 “ 滤 镜 ”命令 ， 发 现 滤 镜 效果 图 层 中 
出 现 相应 的 滤 镜 效果 名 称 ， 如 图 11.26 所 示 。 

滤 镜 效果 名 称 的 左 侧 带 有 眼睛 图 标 , 隐藏 其 中 一 个 眼睛 图 标 , 相应 的 滤 镜 效果 被 隐藏 ， 
而 最 终 滤 镜 效果 发 生变 化 。 

智能 滤 镜 与 图 层 样式 一 样 ， 可 以 双击 滤 镜 效果 命令 ， 再 次 设置 滤 镜 参数 ， 替 换 原来 的 
效果 。 
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2 于 ”和 最 持 风 


lr 
ei 





图 11.26 ” 滤 镜 效果 图 层 

因为 使 用 多 个 滤 锐 命令 得 到 的 是 混合 效果 ， 所 以 智能 滤 镜 效果 既 可 以 隐藏 ， 也 可 以 通 
过 调换 顺序 来 更 改 混合 效果 。 

7. 通道 与 蒙 版 

Photoshop 中 的 通道 与 蒙 版 是 两 个 高 级 编辑 功能 。 通 道 是 存储 不 同类 型 信息 的 灰 度 图 
像 ， 对 用 户 编辑 的 每 一 幅 图 像 都 有 着 巨大 的 影响 ， 是 Photoshop 必 不 可 少 的 一 种 工具 。 蒙 版 
用 来 保护 被 遮蔽 的 区 域 ， 具 有 高 级 选择 功能 ， 同 时 也 能 够 对 图 像 的 局 部 进行 颜色 调整 ， 而 
使 图 像 的 其 他 部 分 不 受 影响 。 





1) 通道 

通道 最 主要 的 功能 是 保存 图 像 的 颜色 数据 。 例 如 ， 一 幅 RGB 模式 的 图 像 ， 其 每 个 像 
素 的 颜色 数据 是 由 红色 、 绿 色 、 蓝 色 这 3 个 通道 来 记录 的 ， 而 这 3 个 颜色 通道 组 合 定义 后 
合成 了 一 个 RGB 主 通 道 。 

通道 包括 颜色 信息 通道 和 Alpha 通道 。 图 像 默 认 是 由 颜色 信息 通道 组 成 的 ，Alpha 通 
道 主要 用 来 保存 选区 ， 这 样 就 可 以 在 Alpha 通道 中 变换 或 编辑 选区 ， 得 到 具有 特殊 效果 的 

2) 蒙 版 

蒙 版 用 来 控制 图 像 的 显示 与 隐藏 区 域 ， 是 进行 图 像 合 成 的 重要 途径 。 蒙 版 包括 快速 蒙 
版 、 剪 贴 蒙 版 、 图 层 蒙 版 与 形状 蒙 版 等 。 蒙 版 填充 时 ， 黑 色 区 域 将 被 隐藏 ， 白 色 区 域 可 见 ， 
而 蒙 版 中 的 灰色 区 域 会 根据 灰 度 值 呈 现 出 不 同 层次 的 半 透 明 效果 。 

【 例 11.5】 抠 图 合成 创意 实例 。 

主要 涉及 如 何 细致 抠 图 ， 对 图 层 混合 模式 的 理解 ，“ 色 相 / 饱 和 度 ” 调 整 对 颜色 的 不 同 
影响 ， 以 及 通道 的 应 用 等 。 

素材 如 图 11.27 所 示 ， 效 果 图 如 图 11.28 所 示 。 

操作 步骤 如 下 : 

1) 抠 图 ( 孔 竹 ): 为 了 保证 最 终 图 像 的 清晰 ， 首 先 把 图 像 放 大 ， 在 完成 抠 图 之 后 再 把 图 
像 缩小 回 原始 大 小 。 对 图 像 整 体 用 “图 像 ” 一 “图 像 大 小 ”命令 放大 ， 如 图 11.29(a) 所 
示 ， 将 单位 改 为 百分比 ， 色 选 “ 约 束 比 例 ”， 把 图 像 宽 高 都 设置 为 原来 的 400%6 。 
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图 11.28 ” 抠 图 合成 创意 效果 图 


2) 复制 背景 层 ， 选 择 “ 图 像 ”菜单 一 “调整 ”选项 一 “色相 /饱和 度 ” 命 令 ， 对 颜色 
进行 调整 ， 把 黄色 的 草地 变 为 绿色 。 同 时 将 颜色 的 饱和 度 提高 ， 如 图 11.29(b) 所 示 。 

3) 单 击 “ 通 道 ” 面 板 ， 经 过 这 样 的 调整 之 后 ， 在 蓝 色 通 道中 ， 黑 白 最 为 分 明 。 将 蓝 色 
通道 复制 两 份 ， 对 通道 的 色 阶 进行 调整 ， 将 羽毛 旁边 的 杂 草 去 掉 ， 为 蓝 副 本 输入 色 阶 中 间 
值 为 0.26， 为 蓝 副本 2 输入 色 阶 中 间 值 为 0.37， 如 图 11.29(c) 所 示 。 

4) 按 着 Ctrl 键 单 击 蓝 副 本 2， 将 蓝 副本 2 通道 载 入 选区 。 按 CtrlHH 组 合 键 ， 将 选区 
隐藏 。 这 时 看 不 到 选区 ， 但 是 选区 是 起 作用 的 ， 方 便 我 们 直观 地 进行 修理 。 

进入 蓝 副 本 通道 ， 选 择 一 个 较 软 的 画笔 ， 使 用 白色 ， 降 低 画 笔 不 透明 度 为 25%， 在 
羽毛 损失 比较 厉害 的 地 方 涂 一 涂 ， 可 以 看 到 羽毛 会 被 慢 慢 加 上 。 注 意 ， 不 要 把 杂 草 也 给 涂 
出 来 。 这 个 方法 可 以 结合 两 个 通道 的 优点 ， 而 将 多 余 的 部 分 完美 地 过 滤 掉 。 

完成 后 按 Ctrl+D 取消 选择 。 如 果 最 后 发 现 还 是 有 杂 草 在 里 边 ， 可 以 用 软 的 黑色 画笔 ， 
降低 不 透明 度 ， 在 多 余 的 图 像 上 慢 慢 修复 。 

5) 使 用 图 像 大 小 命令 ， 再 将 图 像 缩 小 为 最 初 打开 时 的 大 小 。 羽 毛 被 最 大 程度 保留 。 

按 Ctrl+A 全 选修 好 的 通道 ， 复 制 。 这 里 不 用 图 层 来 完成 合成 ， 直 接 使 用 通道 中 做 好 的 
图 像 来 合成 作品 。 打 开 前 面 提供 的 背景 图 像 ， 粘 贴 到 新 层 中 。 

6) 将 此 图 层 的 混合 模式 改 为 “ 滤 色 ”， 黑 色 将 被 去 除 。 

7) 打开 美女 图 片 素材 ， 用 魔 棒 选 择 外 边 的 白色 部 分 ， 再 反选 ， 用 移动 工具 拉 入 图 像 ， 
按 下 Ctrl+T 快捷 键 ， 自 由 变换 美女 图 像 的 大 小 ， 完 成 合成 图 。 
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图 11.29(e) 调整 色 阶 


11.3.2 ”Photoshop 功能 介绍 


从 功能 上 看 , Photoshop CC 可 分 为 图 像 编 辑 、 图 像 合成 、 校 色调 色 及 特效 制作 部 分 等 。 
图 像 编 辑 是 图 像 处 理 的 基础 ， 可 以 对 图 像 做 各 种 变换 ， 如 放大 、 缩 小 、 旋 转 、 倾 斜 、 
镜像 、 透 视 等 。 也 可 进行 复制 、 去 除 斑点 、 修 补 、 修 饰 图 像 的 残损 等 。 这 在 婚纱 摄影 、 人 
像 处 理 制作 中 有 非常 大 的 用 处 ， 去 除 人 像 上 不 满意 的 部 分 ， 进 行 美化 加 工 ， 得 到 让 人 非常 


满意 的 效果 。 





图 像 合成 则 是 通过 对 几 幅 图 像 应 用 图 层 操作 、 工 具 应 用 而 合成 完整 的 、 传 达意 义 明 确 
的 图 像 ， 这 是 美术 设计 的 必 经 之 路 ;该 软件 提供 的 绘图 工具 让 外 来 图 像 与 创意 很 好 融合 ， 


使 图 像 的 合成 天 衣 无 颖 。 


校 色 调 色 是 该 软件 深 具 威力 的 功能 之 一 ， 可 方便 快捷 地 对 图 像 的 颜色 进行 明暗 、 色 偏 
的 调整 和 校正 ， 也 可 在 不 同 颜色 间 进 行 切换 以 满足 图 像 在 不 同 领域 (如 网 页 设计 、 印 刷 、 多 


媒体 等 方面 ) 的 应 用 。 


特效 制作 在 该 软件 中 主要 由 滤 镜 、 通 道 及 工具 综合 应 用 完成 ， 包 括 图 像 的 特效 创意 和 
特效 字 的 制作 ， 如 油画 、 浮 雕 、 石 谨 画 、 素 描 等 常用 传统 美术 技巧 都 可 通过 该 软件 的 特效 


完成 。 而 各 种 特效 字 的 制作 更 是 很 多 美术 设计 师 热衷 于 该 软件 的 原因 。 





具体 应 用 主要 是 平面 设计 、 网 页 设计 、 界 面 设计 等 , 本 章 主要 介绍 了 利用 Photoshop CC 


进行 网 页 设计 。 
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11.3.3 ”Photoshop CC 文件 存储 格式 


PSD: 原始 的 图 像 文件 ， 保 存 有 图 层 、 色 版 、 路 径 ， 还 有 一 些 调整 图 层 等 。 
PSB(Photoshop Big): 此 格式 用 于 存储 大 小 超过 2GB 的 文档 ， 是 新 版 本 的 PSD 格式 。 


11.4 Photoshop CC 网 页 设计 





本 节 以 网 页 设计 实例 入 手 , 讲述 如 何 利用 Photoshop CC 进行 网 页 设计 。 以 具体 的 操作 ， 
逐一 向 读者 展示 Photoshop 在 网 页 设计 中 的 强大 功能 。 本 节 主 要 讲解 素材 的 导入 与 处 理 、 
公司 名 称 的 设计 、 导 航 条 的 制作 方法 、BANNER 的 设计 、 产 品 图 像 轮 显 区 的 设计 、 整 个 页 
面 的 布局 与 修饰 ， 网 页 效果 如 图 11.30 所 示 。 


A 


和 时。 关于 我 们 产品 展示 。 服务 内 容 。 企业 文化 。 联系 方式 站 a 


公司 名 称 
先进 的 生产 线 已 
看 奥 水 设备 是 以 有 两 仙 压力 关 为 动力 ， 以 机 要 六 | 导航 条 
分 原理 为 其 的 一 种 洲 流 分 离 ， 使 用 压力 通 党 为 

0 aps 一 0 ep。 分 再 了 种 Im 一 0 1um 可 广泛 应 用 于 

物质 的 分 两 、 六 编 、 扫 姥 。 站 这 过 各 无 想 畦 化 ， 常 

捧 作 ， 对 势必 性 物质 的 分 两 万 为 和 实 ， 并 具有 银 好 的 机 

冲 肌 由 和 所 化 性 座 。 能 在 s 以 下 ，PR 为 2-11 

的 条 从 下 长 期 连续 使 用 


饮用 碳酸 矿泉 水 能 增进 消化 液 的 分 泥 ， 协 助 胃 肠 的 消化 ， 而 且 有 洗 浪 组 织 和 稀释 屎 
浓度 的 效用 ， 因 而 对 治 急 肠 胃病 ，、 十 二 指 肠 溃疡 、 民 性 肝炎 、 便 秘 、 胆 结石 、 肾 盏 炎 、 


卡 他 性 膀 胰 及 慢性 喉 炎 ， 支 气管 炎 等 都 具有 较 好 的 医疗 效果 . 
XXX 矿泉 水 





产品 图 像 


轮 显 区 和 进入 单 并 30 米 、 攻 125 天、 最 高 处 达 18 汐 主 厂房， 正在 人 夺 运 
二 六 生 产 直 了 入 恨 宙 两， 如此 大 的 
要 只 内定 人 名 工人 让 我们 多 少 有 生 轩 ， 副 经理 和 年 
各 说 ， 本 委 水 生产 从 必 业 到 子玉 要 清流 ， 潭 针 寺 基 针 
实现 了 全 自动 化 失 作 ， 一 切 工艺 在 yp 等级 百 人 化 间 全 自 小 一 人 
化 完成， 完全 在 天 盏 环境 下 拭 作 ， 胃 全 所 有 生产 线 同时 运行 ， 车 间 
的 工人 志 只 有 用 二 名， 两 且 大 多 是 看护， 调试 机 本 
质量 是 企业 的 生 钱 ， 早 在 1998 年 ，/y 人 司 已 通过 国际 1s09008 人 证， 卫 后 双开 络 时 和 lacop 雪 朗 全 和 理 体 系 。 0 
一 二 不 断 凶 新 ，2003 生 椎名 具 个 人 的 五 和 台 石 和 利 酉 ， 便 于 要 者 识别 ， 村 寺 届 水 ， 仁 水 、 届 梢 .而 加 太 
各 水 生产 和 机 产后 ， 对 水 和 的 这 环 寺 严 和 把关 ， 了 上 上 水 质 芝 到 六 注 、 而 员工 的 生活 区 亿 设 在 生产 地 ， 混 旬 了 生 
括 殉 ， 时 计划 明年 引入 国际 先进 的 “ 欢 再 对 ”一 条 超生 产 经 ， 可 碱 少 部 分 生 产 环节 矿泉 与 空 所 的 接 由 时 间 更 天 底部 横 条 
-于 于 全 水 的 加 必 开 法， 村 改变 传统 的 工艺 村 区 采用 新 的 统 术 设计 ， 对 于 清 污 的 用 度 、 罗 和 东 国 和 进行 改良 ， 进 一 
步 保洁 能 和 水 同时， 在 生产 过 程 中 ， 堆 加 自动 在线 控 系统 ， 对 太 襟 的 村 术 关 时 从 持 芝 - 





后 权 所 有 Copyrieht c)2001-2012 首页 关于 我 人 产品 展示 服务 内 容 企业 文化 联系 方式 


图 11.30 某 饮 用 水 公司 网 站 首页 设计 效果 图 


1. 新 建 一 个 文件 


新 建 一 个 大 小 合适 的 文件 ， 尺 寸 为 1500 X2000 像素 。 一 般 是 根据 屏幕 分 辨 率 来 定义 
宽度 尺寸 ， 这 里 采用 1440X900 像素 的 分 辩 率 ， 网 页 内 容 的 两 边 露出 背景 ， 因 此 宽度 设置 
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得 大 一 些 ， 最 终生 成 网 页 时 ， 可 缩小 图 像 ， 裁 切 多 余 的 画布 
根据 网 页 内 容 的 需要 进行 调整 。 


2. 导入 素材 


， 以 适应 较 低 的 分 辩 率 ; 


也 
沽 





将 背景 导入 到 Photoshop 中 。 调 整 背景 尺寸 为 1500X2000 像素 ， 使 其 
11.31 所 示 。 








铺 满 画布 ， 如 图 





Y 注 意 : 


在 选择 背景 素材 时 ， 素 材 的 尺寸 最 好 不 小 于 网 页 页 面 的 尺寸 ， 这 样 就 无 须 放大 背景 图 
像 ， 否 则 可 能 会 降低 背景 图 像 的 浏览 效果 。 





图 11.31 将 背景 导入 到 网 页 图 像 中 


3. 设计 公司 名 称 

选择 “文字 ”工具 ， 设 置 字体 颜色 为 白色 、 字 体 大 小 为 72 像素 ， 输 入 公司 的 名 字 。 
双击 此 图 层 ， 添 加 “图 层 样式 ”。 
“投影 ”: 颜色 为 #0a93d9， 其 他 参数 如 图 11.32(a) 所 示 。 


“渐变 达 加 ”: 颜色 为 #Iflfl~#ffffff， 其 他 参数 如 图 11.32(b) 所 示 ， 公 司 名 称 的 文字 效 
果 如 图 11.32(c) 所 示 。 





















































投 时 
结构 
混合 避 式 回 ， 正片 时 度 加 | 一 新 讼 到 加 
不 通明 度 @): 一 D100 % 渐变 
角度 QI: (| 】 责 度 闭合 用 全 局 尖 @) 混合 模式 (0): 正常 回 仿 色 
和 吕 ， 革 了 人 来 不 透明 度 虽 一 TD % 
es 着 Rr| 
大 MG: 吧 一 一 一 一 而 一 全 素 
= 样式 D: 线性 ~ 贱 与 图 层 对 齐 QD 
] /AN 
i A"| sted 角度 人、 ) 90 度 
杂 色 NG 人 0 % | 编 披 BG): 一 yy 一 100 % 
EE 
设置 击 认 什 











[设置 为 避 认 值 ] [复位 为 默认 什 
图 11.32(b) 渐变 琶 加 











图 11.32(a) 投影 效果 
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AHR 


图 11.32(c) 公司 名 称 的 设计 效果 


*°230° 


4. 制作 导航 条 

1) 设计 导航 条 。 选 择 “ 圆 角 矩 形 ”工具 ， 设 置 填充 颜色 为 白色 、 圆 角 半 径 为 15 像素 ， 
绘制 一 个 圆 角 矩形 ， 和 矩形 尺寸 小 于 整体 背景 ， 设 置 图 层 的 不 透明 度 为 70%。 

输入 导航 文本 ， 如 首页 、 关 于 我 们 、 产 品 展示 等 ， 每 一 个 导航 文本 之 间 有 一 定 的 间隔 。 

2) 将 “首页 ”文本 部 分 制作 成 按钮 样式 。 将 “首页 ”文本 的 字体 颜色 设置 成 白色 ， 选 
择 “ 圆 角 矩 形 ” 工具， 设置 圆 角 半径 为 15 像素 ， 填 充 颜色 为 黑色 ， 绘 制 一 个 大 于 文本 的 圆 
角 和 矩形 。 双 击 此 图 层 ， 添 加 “图 层 样 式 ”。 

“投影 ”: 颜色 为 白色 ， 其 他 参数 如 图 11.33(a) 所 示 。 

“ 浙 变 释 加 ”: 填充 颜色 为 270bc 一 志 48bcf， 其 他 参数 如 图 11.33(b) 所 示 。 
































投影 
结构 
混合 模式 @) 正片 又 底 -En 
不 通明 朗 (O): 一 10“ 
角度 :| 上 】 55。 度 团 合用 全 局 XG) 人 地 
人 人 混合 模式 (O): 正常 ~ 口 信 色 
:GS 通明 度 (P): 一 
[| 中] 反 向 (CQ) 
旺 样式 LD: 线性 ~ 同 与 图 层 对 齐 人 
su: ] Dito 铅 0: (mn 诺 
杂 色 NN: C= 一 一 0o % 、 
和 pp Fe 
夏 们 为 下 认 全 
图 11.33(a) 投影 效果 图 11.33(b) 渐变 营 加 


3) 制作 搜索 框 。 
选择 “ 圆 角 矩形 ”工具 ， 设 置 圆 角 半 径 为 15 像素 ， 填 充 颜色 为 白色 ， 绘 制 圆 角 矩形 。 


双击 此 图 层 ， 添 加 “图 层 样式 ”。 
“混合 选项 ”: 不 透明 度 为 100， 填 充 不 透明 度 为 0， 其 他 参数 如 图 11.34(a) 所 示 。 
“内 阴影 ”: 混合 模式 为 “正片 琶 加 ”， 颜色 为 #02633a4， 其 他 参数 如 图 11.34(b) 所 示 。 


导入 素材 中 的 “放大 镜 ” 图 像 。 导 航 条 的 效果 如 图 11.35 所 示 。 
5. 制作 BANNER 


1) 制作 BANNER 的 背景 。 选 择 “ 圆 角 和 矩形 ”工具 ， 设 置 圆 角 半径 为 15 像素 ， 填 充 
颜色 为 白色 ， 在 导航 条 下 方 绘制 一 个 较 大 的 圆 角 和 矩形， 将 不 透明 度 设置 为 70%。 
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一 混合 选项 

常规 混合 
混合 模式 加 : 正常 ~ 
不 通明 度 (QO): 一 10 一 % 

Ee 

填充 不 透明 度 吕 :CT % ee 
通道 加 RQ， 回 cG@， 回 上 攻克 - 本 


控 空 则 : 无 ~ 





图 11.34(a) 混合 选项 





a 
角度 的 : (|) 50 度 回 使 用 全 局 光 G@ 
FE 


| 杂 色 MG 一 全 0 % 
图 11.34(b) 内 阴影 





a 
关于 我 们 ”产品 展示 。 “服务 内 容 。 企业 文化 ”联系 方式 人 4、 


图 11.35 导航 条 
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2) 制作 图 片 播 放 区 域 。 选 择 “ 圆 角 和 矩形 ”工具 ， 设 置 圆 角 半径 为 15 像素 ， 填 充 颜色 
为 黑色 ， 在 左 侧 绘制 一 个 约 有 BANNER 背景 一 半 的 圆 角 矩形。 双击 此 图 层 ， 添 加 “图 层 
样式 ”。 设 置 投影 和 渐变 营 加 ， 参 数 如 图 11.36(a) 和 (b) 所 示 。 
3) 导入 素材 图 片 ， 移 动 至 BANNER 色 块 区 域 。 双 击 此 图 层 ， 添 加 “图 层 样 式 ”。 
“内 阴影 ”: 混合 模式 为 “正片 琶 底 ”， 颜 色 为 黑色 ， 其 他 参数 如 图 11.36(a) 所 示 。 
“ 描 边 ”颜色 为 把 19ee5， 其 他 参数 如 图 11.36(b) 所 示 。 
4) 添加 企业 生产 信息 。 在 BANNER 右 侧 添加 “先进 的 生产 线 ” 一 段 文本 信息 ， 再 添 
加 “了 解 更 多 ”按钮 。 将 按钮 的 “图 层 样 式 ” 设 置 为 投影 和 渐变 全 加 ， 参 数 如 图 11.34(a) 





和 (b) 所 示 。 
内 阴影 坟 b 
结构 结构 
混合 模式 @): 正片 到底 -mn 大 小 :6G 一 上 他 来 
不 透明 度 Oj: 一 75 % 位 置 加 : 外 部 ~ 
负 度 W: ( | ) 本 度 回合 全 BX | - 


中 高 Qj: CS 1 像素 














用 QO: 一 一 0% 二 类 中 其 名 
:5 一 一 一 了 一角 雪 se: 
所 
a: [ A Dnsinso 
和 ev 
下 位 ?条 


图 11.36(a) 内 阴影 


图 11.36(b) 描 边 
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5) 设置 图 片 切换 的 播放 按钮 组 。 选 择 “ 和 矩形 ”工具 ， 设 置 填充 颜色 为 黑色 ， 绘 制 圆 角 
矩形。 双击 此 图 层 ， 添 加 “图 层 样 式 ”， 设 置 为 投影 和 渐变 大 加 ， 参 数 如 图 11.34(a) 和 (b) 
所 示 。 再 选择 “椭圆 ”工具 ， 填 充 颜 色 为 #e8e8e8， 按 下 Shift 键 绘制 小 正 圆 ， 设 置 此 圆 为 
按钮 效果 。 双 击 此 层 ， 添 加 “图 层 样式 ”。 

斜面 与 浮雕 : 样式 为 “内 斜面 ”， 方 法 为 “平滑 ”， 如 图 11.37 所 示 。 


射 面 和 浮 隐 
结构 

















光泽 等 高 线 : L 局 湖 $ 捉 上 


高 光 模式 由: 小 色 ~ 
不 透明 度 O): 一 75 % 
阴影 模式 (A): 正片 又 底 -Ey 


不 通明 度 @: ~Y9 一 75  % 
[设置 为 默认 值 [复位 为 默认 值 | 
图 11.37 斜面 和 浮雕 
绘制 多 个 圆 ， 添 加 上 述 相同 的 图 层 样式 ， 形 成 播放 按钮 组 。 
BANNER 效果 如 图 11.38 所 示 。 



















先进 的 生产 线 
矿泉 水 设备 是 以 辜 两 侧 压力 莽 为 动力 ， 以 机 械 第 

分 原理 为 基础 的 一 种 溶液 分 离 ， 使 用 压力 通常 为 

0. 2WPa 一 0. 6yPa 分离 孔径 Inm 一 0. 14m, 可 广泛 应 用 于 

物质 的 分 离 、 浓缩 、 提 纯 。 超 小 过 程 无 相 转 化 ， 常 温 









操作 ， 对 热 葡 性 物质 的 分 离 尤为 适宜 ， 并 具有 良好 的 而 
温 、 碘 本 大 和 耐 氧 化 性 能 ， 能 在 60C 以 下 ，PH 为 2-11 
的 条 件 下 长 期 连续 使 用 - GD 










图 片 播放 





图 片 切换 的 播放 按钮 组 


图 11.38 BANNER 效果 


6. 制作 主体 内 容 区 
1) 主体 内 容 背景 。 选 择 “ 圆 角 和 矩形” 工具 ， 设 置 圆 角 半 径 为 5， 填 充 颜色 为 白色 ， 绘 
制 适当 大 小 的 矩形 ， 图 层 不 透明 度 为 75%。 
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2) 公告 栏 : 在 主体 内 容 的 顶部 输入 相应 的 广告 文字 : “饮用 碳酸 矿泉 水 能 增进 ...” 

3) 产品 展示 区 : 选择 “ 圆 角 和 矩形” 工具， 设置 圆 角 半径 为 5， 填充 颜色 为 黑色 ， 绘 制 
圆 角 矩形 。 双 击 此 图 层 ， 添 加 “图 层 样 式 ”， 设 置 为 投影 和 渐变 和 加 ， 参 数 如 图 11.34(a) 
和 (b) 所 示 。 

4) 导入 产品 素材 图 片 ， 适 当 调整 图 片 尺寸 。 双 击 此 图 层 ， 添 加 “图 层 样式 ”， 设 置 为 
投影 和 渐变 琶 加 ， 参 数 如 图 11.34(a) 和 (b) 所 示 ， 复 制 多 个 ， 依 次 排列 。 

5) 绘制 向 左 和 向 右 的 箭头 ， 双 击 此 层 ， 添 加 “图 层 样式 ”， 设 置 外 发 光 和 颜色 县 加 ， 
参数 自 定义 。 

6) 添加 图 片 和 文本 内 容 : 导入 企业 外 景 素材 ， 输 入 企业 简介 。 

效果 如 图 11.39 所 示 。 


饮用 碳酸 矿泉 水 能 增进 消化 液 的 分 逊 ， 协 助 胃 肠 的 消化 ， 而 且 有 洗涤 组 织 和 稀释 尿 
浓度 的 效用 ， 因 而 对 治 息 肠胃 病 、 十 二 指 肠 省 疡 、 慢 性 肝炎 、 便 秘 、 胆 结石 ， 肾 盏 炎 、 
卡 他 性 膀胱 及 慢性 喉 炎 、 支 气管 炎 等 都 具有 较 好 的 医疗 效果 


XXX 矿泉 水 


加 名 全 加 外 


环境 优美 的 生产 基地 

进入 单 呈 30 米 、 长 125 米 、 生 高 处 达 18 米 的 主 厂房 ， 正 在 忙碌 运 
作 的 数 条 类 装 水 和 两 条 桶 装 水 生产 乒 跃 入眼 诊 。 然 而 ， 如 此 末 大 的 
规模 只 见 宫 人 窜 十 余 名 工人 ， 让 我 们 多 少 有 些 国 感 ， 副 总 经 理 几 利 年 
解释 说 ， 矿 家 水 生产 从 吹 其 到 关子 无 菌 消 寿 、 清 洗 、 灌 装 、 封 状 扼 
实现 了 全 自动 化 扒 作 ， 一 切 工艺 都 在 GMP 等 级 百 级 净化 间 全 自动 一 体 
化 完成 ， 充 全 在 无 画 环境 下 的 作 。 即便 所 有 生产 线 同时 运行 ， 车 间 
内 的 工人 也 只 有 几 十 名 ， 而 且 大 多 是 负责 看 护 、 调 试 机 器 。 

质量 是 企业 的 生命 线 ， 早 在 1998 年 ，XX 公 司 已 通过 国际 1509002 认 证 ， 随 后 又 开始 导入 Haccp 食 品 安全 管理 体系 。 XX 
一 直 坚持 不 断 创新 ，2003 年 推出 极 具 个 性 的 五 加 仑 钻石 形 专利 桶 ， 便 于 消费 者 识别 ， 杜 绝 轩 水、 个 水 、 黑 病 ， 而 景 田 矿 
泉水 生产 基地 失 产 后 ， 对 水 源 的 周边 环境 严格 把 关 ， 防 止 水 质 受到 影响 。 丙 员工 的 生活 区 也 设 在 非 生产 基地 ， 滔 锡 了 生 
活 污 染 。 景 田 计 划 阴 年 引入 国际 先进 的 “次 灌 封 ”一 条 龙 生产 线 ， 可 茂 少 部 分 生产 环节 ， 矿 挫 水 与 空气 的 接触 时 间 更 短 
， 对 于 桶 装 水 的 回收 清洗 ， 将 改变 传统 的 工艺 模式 ， 采 用 新 的 皇 术 设计 ， 对 于 清洗 的 温 虚 、 覆 益 范 围 等 进行 改良 ， 进 一 
步 保洁 节能 省 水 。 同时， 在 生产 过 程 中 ， 增 加 自动 在 线 监控 系统 ， 对 矿 提 水 的 状态 随时 保持 监控 ， 


图 11.39 主体 内 容 区 








7. 底部 横 条 的 设计 


1) 选择 “矩形” 工具， 设置 颜色 为 灰 蓝 色 #0473be， 绘 制 一 个 矩形 。 双 击 此 图 层 ， 添 
加 “图 层 样 式 ”， 设 置 为 投影 和 渐变 琶 加 ， 参 数 如 图 11.34(a) 和 (b) 所 示 。 

2) 导入 素材 图 片 ， 输 入 文本 。 

3) 底部 信息 : 在 网 页 底部 添加 相应 的 版 权 信 息 和 底部 导航 信息 。 

效果 如 图 11.40 所 示 。 





版 权 所 有 Copyr ight (6)2001-2012 首页 关于 我 们 产品 暴 示 服务 内 容 企业 文化 联系 方式 


图 11.40 ”底部 效果 
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11.S 使 用 Photoshop 制作 网 页 热点 链接 











使 
| 








ww 


Photoshop 切片 功能 ， 把 网 页 切 成 不 同 的 区 块 ， 给 每 个 区 块 加 上 热点 链接 。 
随机 照 一 张 图 片 ， 如 图 11.41 所 示 。 











图 11.41 原始 图 片 


2) 制作 几 个 按钮 ， 如 图 11.42 所 示 。 





图 11.42 ”制作 按钮 


3) 用 辅助 线 打 好 切片 范围 ， 如 图 11.43 所 示 。 





4) 选择 切片 工具 ， 创 于 


图 11.43 ”绘制 参考 线 





二 基于 参考 线 的 切片 ， 如 图 11.44 所 示 。 


利用 Photoshop 设计 网 页 


=。235S。 


基于 参考 里 的 切片 


aa 





图 11.44 ”绘制 切片 


5) 用 切片 选择 工具 ， 组 合 切片 ， 分 割 导航 的 按钮 ， 如 图 11.45 所 示 。 





图 11.45 


去 除 参考 线 后 的 效果 


6) 用 切片 选择 工具 ， 在 主页 按钮 上 双击 ， 设 置 相 应 的 网 址 目标 ， 如 图 11.46 所 示 。 





切片 选项 


| 切片 类 型 (5): 
| 


图 11.46 为 切片 设置 链接 


尺寸 
X00): 
YY): 

切片 背景 类 型 (L): 





图 


7) 选择 文件 -一 存储 为 Web 格式 。 选 择 HIML 和 











8) 桌面 上 出 现 image 文件 夹 和 主页 .html 文件 ， 如 图 





图 像 


名 称 (N): 主页 按钮 

URL(U): 填写 网 址 

目标 (R): _bank 
信息 文本 (M): 点 击 进入 主页 
A 标记 (A): 点 击 进入 主页 


48 wv 
304 H(t 
无 ~ 


像 、 所 有 切片 ， 如 图 11.47 所 示 。 
11.48 所 示 。 
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图 11.48 存储 的 文档 
9) image 文件 夹 里 是 所 有 切片 分 割 的 按钮 和 背景 ， 如 图 11.49 所 示 。 


图 11.49 切片 图 片 


10) 右键 单 击 桌面 上 的 主页 .html 文件 ， 用 浏览 器 打开 。 主 页 按钮 制作 完成 ， 已 经 有 热 
点 链接 ， 如 图 11.50 所 示 。 
ro -ET 


生字 已 D filey//C:/Users/Administrator/Desktop/ 主 页 .html 











图 11.50 切片 图 片 
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小 结 


本 章 主要 介绍 了 利用 Photoshop 进行 网 页 设计 : 
1. Photoshop CC 简介 

2. Photoshop CC 的 基本 操作 与 主要 功能 

3. 利用 Photoshop CC 软件 进行 平面 设计 

4. 利用 Photoshop CC 软件 进行 网 页 设计 


练 习 题 


1. Photoshop 的 主要 功能 有 哪些 ? 
2. 平面 设计 的 构图 表现 形式 有 哪些 ? 
3. 以 淘宝 商城 为 例 ， 简 述 其 版 式 结构 特点 和 分 类 导航 方式 。 


上 机 实验 


1. 背景 知识 

本 章 所 学 的 Photoshop 基本 技能 及 本 教材 中 所 讲 的 网 页 设计 基础 理论 。 
2. 实验 准备 工作 

将 相应 的 PSD 样 图 、 素 材 文件 发 送 到 学 生 主机 ， 以 供 学 生 参 考 使 用 。 
3. 实验 要 求 


(1) 图 片 合成 效果 。 要 求 : 根据 给 定 素材 ， 利 用 Photoshop 中 的 图 层 混 合 模式 、 图 层 样 
式 等 制作 效果 图 ， 如 图 11.51 所 示 一 一 灯泡 里 的 金鱼 。 

(2) 制作 网 页 导航 栏 。 要 求 : 利用 渐变 填充 和 图 层 样式 制作 而 成 ， 如 图 11.52 所 示 。 

(3) 制作 网 站 首页 。 要 求 : 首先 对 网 站 首页 进行 构图 ， 然 后 利用 Photoshop 设计 网 页 ， 
如 图 11.53 所 示 。 


4. 课时 安排 
上 机 实验 安排 8 课时 ， 实 验 要 求 1) 为 2 课时 ，2) 为 2 课时 ，3) 为 4 课时 。 
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条 一 
图 11.51 灯泡 里 的 金鱼 图 11.52 ”网 页 导航 栏 
顶部 导航 
BANNER 横幅 


中 间 产 品 区 


底部 导航 


NY 


关于 我 们 。 联系 我 们 。 人 才 招 壬 。 商家 入 驻 。 她 物 指 南 。 支付 方式 。 广告 服务 。 售后 服务 。 特色 服务 。 友情 链接 


图 11.53 ”电子 商务 网 站 首页 


5. 实验 指导 

1) 图 片 合 成 效果 : 灯泡 里 的 金鱼 。 操 作 步 又 如 下 : 

(1) 打开 素材 1( 灯 泡 )， 再 打开 素材 2( 水 样 )。 在 水 样 中 ， 选 择 “ 移 动 ”工具 ， 按 下 鼠 
标 左 键 ， 将 其 拖 入 灯泡 中 。 

(2) 选中 图 层 1， 调 整 素材 2 的 位 置 和 尺寸 ， 将 该 图 层 的 混合 模式 设置 为 明度 ， 如 图 
11.54(a) 所 示 。 效 果 如 图 11.54(b) 所 示 。 
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俩 定 : 口 wy 中 自 填充 : 100% > -| 
E33 图 层 1 4 | 
画 [ | za a 
图 11.54(a) 图 层面 板 图 11.54(b) 修改 图 层 混合 模式 后 的 效果 


(3) 修改 图 层 1 的 不 透明 度 ， 将 不 透明 度 设 置 为 40%。 

(4) 单 击 图 层 1， 选 择 “ 椭 圆 选 框 ”工具 ， 绘 制 椭圆 形 ， 将 灯泡 选中 ， 如 图 11.54(c) 所 
示 。 单 击 “ 添 加 图 层 蒙 版 ”按钮 ， 为 图 层 1 添加 蒙 板 ， 设 置 前 景色 为 黑色 。 选 择 “ 画 笔 ” 
工具 ， 设 置 适当 的 画笔 大 小 进行 涂抹 ， 多 余部 分 抹 去 ， 显 示 效果 为 灯泡 中 有 水 。 

打开 素材 3( 气 泡 )， 选 择 “ 椭 圆 选 框 ”工具 ， 按 下 Cul 键 ， 选 中 大 小 不 同 的 多 个 气泡 ， 
如 图 11.54(d) 所 示 。 复 制 ， 切 换 到 “灯泡 ”图 像 文 件 ， 粘 贴 ， 此 层 为 图 层 2， 添 加 蒙 板 ， 设 
置 前 景色 为 黑色 。 选 择 “ 画 笔 ” 工 具 ， 设 置 适 当 的 画笔 大 小 进行 涂抹 ， 多 余 气泡 抹 去 。 

重复 以 上 选 气泡 、 复 制 、 粘 贴 、 添 加 蒙 版 、 抹 去 多 余 气 泡 等 操作 ， 此 层 为 图 层 3， 在 
灯泡 中 产生 气泡 效果 ， 如 图 11.54(e) 所 示 。 














.54(d) ”选取 气泡 图 11.54(e) 合并 气泡 图 层 

(5) 打开 素材 4( 鱼 )， 选择“ 移动 ”工具 ， 按 下 鼠标 左 键 ， 将 鱼 拖 入 “灯泡 ”图 像 文 件 ， 
此 层 为 图 层 4， 选 择 “ 自 由 变换 ”工具 ， 缩 小 图 像 。 

(6) 选择 “移动 ”工具 ， 将 此 层 置 于 气泡 、 水 样 图 像 所 在 图 层 下 方 ， 设 置 图 层 4 的 混 
合 模式 为 “正片 琶 底 ”。 单 击 “ 添 加 图 层 蒙 版 ”按钮 ， 为 图 层 4 添加 蒙 板 ， 设 置 前 景色 为 
黑色 。 选 择 画 笔 工具 ， 设 置 适当 的 画笔 大 小 进行 涂抹 ， 多 余部 分 抹 去 。 得 到 最 终 效 果 ， 如 
图 11.51 所 示 。 

2) 制作 导航 条 。 

导航 条 是 网 站 建设 的 基本 元 素 之 一 ， 利 用 PhotoShop 制作 导航 条 是 非常 有 必要 的 。 

操作 步骤 如 下 : 

(1) 新 建 一 个 500X400 像素 的 文档 ， 按 下 “Ctl+A” 组 合 键 ， 选 中 整个 画布 ， 背 景 填 
充 颜色 为 #Iblblb。 

(2) 新 建 一 个 图 层 ， 选 择 “ 和 矩形 选 框 ” 工 具 ， 绘 制 尺寸 为 288X 50 像素 的 矩形 选区 ， 
填充 颜色 为 药 a$aSa。 

(3) 双击 此 图 层 ， 添 加 “图 层 样式 ”。 


图 11.54(c) 椭圆 选区 图 1 
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内 阴影 : 混合 模式 为 “正常 ”， 颜 色 为 白色 ， 参 数 及 效果 如 图 11.55(a) 所 示 。 

渐变 释 加 : 渐变 颜色 为 黑色 至 白色 ， 混 合 模式 为 “正常 ”， 不 透明 度 为 43%， 其 他 参 
数 如 图 11.55(b) 所 示 。 

(4) 复制 该 图 层 ， 形 成 多 个 按钮 ， 输 入 文本 。 

(5) 在 第 一 个 按钮 的 左 侧 绘 制 一 个 圆 ， 适 当 添 加 “图 层 样 式 ”， 绘 制 一 个 箭头 。 

(6) 最 后 ， 将 背景 填充 为 渐变 色 ， 设 置 渐变 色 为 黑色 一 # 0438fb， 得 到 的 最 终 效 果 如 图 
11.52 所 示 。 





















































































































































内 阴影 
结构 
混合 模式 加 :| 正常 图 [| 渐变 得 加 
不 透明 度 Q@); 一 人 一 一 一 一 | 加 |% 渐变 
角度 人 (CD 55 ”| 度 回合 用 全 局 交加 温 合 模式 (O): | 正 党 回 
距离 @): 各 一 一 一 一 一 [1 | 作案 不 透明 度 @): 一 一 人 一 一 一 | 国 |% 
阴 者 @:DO 一 一 一 一 一 [0 |% 洒 支 [En | 门 反 向 8) 
大 小 :DD 一 一 一 一 一 [0 | 俐 案 样式 U: 线性 品 | 回 与 图 层 对 齐 四 
3 na: (| ) 9 | 度 
等 高 线 : 消除 刀具 
Ld 9 se 缩放 (5): 一 一 |94 |% 
杂 色 : D 一 一 一 一 一 | |% 
复位 为 默认 值 
图 11.55(a) 内 阴影 图 11.55(b) 渐变 营 加 


3) 网 站 首页 的 设计 。 

网 站 首页 大 致 由 四 大 部 分 构成 :顶部 导航 、BANNER 横幅 、 中 间 产 品 区 、 底 部 导航 。 
中 间 部 分 最 为 重要 ， 尽 量 要 制作 得 精美 大 气 一 点 ， 这 样 才 有 吸引 力 。 

(1) 定义 背景 图 案 。 打 开 背 景 图 片 ， 选 择 “ 编 辑 ” 菜 单一 “定义 图 案 ” 命 令 ， 命 名 图 
案 ， 单 击 “ 确 定 ”按钮 ， 关 闭 该 文件 。 

(2) 创建 文件 ， 画 布 尺寸 为 1100X 1300 像素 。 选 择 “油漆 桶 ”工具 ， 设 置 为 “图 案 ” 
填充 ， 选 择 刚 制作 好 的 图 案 纹 理 ， 填 充 画 布 。 

(3) 选择 “ 圆 角 矩形 ”工具 ， 圆 角 半 径 为 5， 在 页 面 上 方 绘制 圆 角 矩形 ， 按 下 “Ctrl+T” 
组 合 键 ， 设 置 变形 尺寸 为 330X45 像素 ， 双 击 此 图 层 ， 添 加 “图 层 样式 ”。 渐 变 和 琶 加 : 渐 
变 颜色 为 #fdb913 一 #Hfeb05， 其 他 参数 如 图 11.56(a) 所 示 ， 请 记 住 此 矩形 的 “图 层 样 式 ”， 
在 下 面 的 步骤 中 会 多 次 用 到 。 











图 11.56(a) 图 层 样式 设置 图 11.56(b) 绘制 搜索 框 


(4) 绘制 搜索 框 ， 效 果 如 图 11.56(b) 所 示 。 选 择 “ 圆 角 和 矩形” 工具 ， 绘 制 圆 角 矩形 ， 双 
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击 此 图 层 ， 添 加 “图 层 样 式 ”: 投影 、 内 阴影 、 颜 色 共 加 ， 参 数 如 图 11.56(c) 所 示 。 
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CO: 厅 使 用 全 岂 光 @) 
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扩展 BC 一 和 
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ES 
混合 模式 @): | 正常 -| 国 罩 


不 通明 度 (Q): 夺 % 
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图 11.56(c) ”搜索 框 的 图 层 样式 : 投影 、 内 阴影 、 颜 色 受 加 


(5) 绘制 语言 下 拉 框 。 与 上 一 步 操作 相同 , 绘制 圆 角 矩形 , 应 用 搜索 框 的 “图 层 样式 ”， 
导入 国旗 素材 图 ， 绘 制 上 方 黄色 (#ffbe0e) 的 导航 矩形 和 输入 导航 文本 信息 ， 如 图 11.56(d) 
所 示 。 





图 11.56(d) 导航 条 上 部 : 导航 文本 和 搜索 框 、 语 言 选 择 框 等 


(6) 绘制 导航 条 。 绘 制 一 个 黑色 的 圆 角 矩形 ， 添 加 适当 的 “图 层 样式 ”， 即 为 导航 条 
区 域 ， 在 导航 条 区 域 下 方 绘制 一 个 宽度 相同 、 颜 色 为 黄色 (#ffbe0e) 的 圆 角 和 矩形， 将 其 栅 格 
化 。 选 择 “矩形 选 框 ”工具 ， 选 中 上 半 部 分 ， 删 除 ， 添 加 适当 的 “图 层 样式 ”。 

(7) 绘制 按钮 。 选 择 “ 圆 角 矩 形 ”工具 ， 颜 色 为 黄色 (#tfbe0e)， 绘 制 圆 角 和 矩形， 适当 添 
加 “图 层 样式 ”。 

添加 导航 文本 : 首页 、 数 码 区 、 服 装 区 .…， 按 钮 处 的 文本 为 黑色 ， 其 他 颜色 均 为 黄色 
(# ffbe0e)。 

添加 网 站 名 称 : XXX 电子 商城 ， 最 终 效 果 如 图 11.56(e) 所 示 。 
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*。242 。 
多 语言 支持 


xxx 电 子 商 城 
请 在 这 机 要 





按钮 
图 11.56(e) 顶部 导航 条 


(8) 制作 BANNER 横幅 。 随 着 Apple 网 站 UI 设计 的 成 功 ， 越 来 越 多 的 网 站 采用 大 版 
力 。 导 入 广告 素材 图 像 ， 适 当 调整 广告 图 像 的 位 置 和 





面 的 BANNER 图 片 吸引 大 家 的 注意 
尺寸 ,在 广告 图 下 方 中 间 位 置 ， 绘 制 矩形 ， 颜 色 为 灰色 ， 适 当 添加 “图 层 样式 ”， 输 入 文 
， 如 图 11.56( 所 示 。 


三 79 


本 “ 单 击 进入 更 多 精彩 


XXX 电子 商城 





图 11.56(f 添加 网 站 BANNER 

产品 区 。 绘 制 较 大 的 白色 矩形 ， 其 中 导入 多 张 / 

主 销 的 产品 ， 在 每 个 产品 之 间 选 择 “ 直 线 ” 工 具 ， 画 若干 个 线条 做 分 割 ， 这 些 
3 


产品 图 片 。 这 个 矩形 区 主 





(9) 绘制 中 间 7 
黑色 圆 角 矩形 , 添加 适当 的 “图 





要 用 于 展示 主 
线条 的 颜色 选用 浅 灰 色 即 可 。 选择“ 圆 角 和 矩形 ”工具 ,绘制 
层 样式 ”为 按钮 效果 ， 添 加 文本 “立即 抢购 ”。 再 绘制 黄色 (# ffbe0e) 圆 角 和 矩形 ， 添 加 适当 


的 “图 层 样式 ”为 按钮 效果 ， 添 加 文本 ， 如 “特价 : 2999”， 如 图 11.56(g) 所 示 。 
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图 11.56(g) 添加 网 站 商品 
(10) 绘制 侧 边 导 航 条 和 简单 的 页 脚 导 航 ， 效 果 如 图 11.56(h) 所 示 。 


手机 Phone 
相机 Camera 
电脑 Computer 


imTelevislon oI ED ED ED 








关于 我 们 。 联系 我 们 。 人 才 招聘 。 商家 入 驻 。 购物 指南 。 支付 方式 广告 服务 。 售后 服务 。 特色 服务 。 友情 通 接 
图 11.56(h) 添加 网 站 侧 边 栏 、 底 栏 
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